Merge branch 'feature/Digital/SSR-93' into feature/SSR-96

2022-11-02 08:15:57 -04:00 · 2022-11-02 08:15:57 -04:00 · 755627a0f5
commit 755627a0f5
parent f74ee61231 ced1b59fed
12 changed files with 57 additions and 19 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,12 +3,16 @@
  <head>
    <script>
      window.dataLayer = [{}];
-     </script>
-     <script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
+    </script>
+    <script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@ -225,7 +225,7 @@
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
-    line-height: 1.625rem;
+    line-height: 1.5rem;
  
    & > span {
      text-align: center;
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@ -33,7 +33,7 @@ export function getMountOptions(mockData) {
  mocks.vehicleCategories = vehicleCategories;
  mocks.issPageValues = issPageValues;
  mocks.queryStrings = queryStrings;
-
+  mocks.$router = mockData?.router;

  const global = {
    mocks: mocks,
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@ -40,8 +40,6 @@
        },
        set: function(newValue) {
          this.$emit("update:modelValue", newValue);
-          this.mainStore.updateVehicleMake(newValue);
-          this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route)
        }
      }
    },
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@ -5,6 +5,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import baseMixin from "@/mixins/base-mixin.js";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
+import { useMainStore } from "@/store";

 // Components
 import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
@ -21,6 +22,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 }));

 describe("vehicle-make.vue", () => {
+
  test("Make question component is initized with api data", async () => {
    //Arrange
    const makeQuestionInitialData = ["honda", "ford", "dodge"];
@ -43,10 +45,8 @@ describe("vehicle-make.vue", () => {
      );
    });
  });
-});
-/*
-describe("vehicle-make.vue", () => {
-  test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
+
+  test("BackButtonAction triggers a router.navigate change", async () => {
    //Arrange
    const { wrapper, apiPromise } = setupMocks({
      pageHeaderWidgetHeaderText: "Select a make to get started",
@ -70,15 +70,13 @@ describe("vehicle-make.vue", () => {
    //Assert
    apiPromise.finally(() => {
      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-      done();
    });
  });
-});

-describe("vehicle-make.vue", () => {
  test("Year set, arePagePrerequisitesValid should be true ", async () => {
    //Arrange
    const { wrapper } = setupMocks({});
+    useMainStore().order.vehicle.year = 2001;

    //Act
    vehicleMake.beforeRouteEnter.call(
@ -93,8 +91,8 @@ describe("vehicle-make.vue", () => {
    //Assert
    expect(arePagePrerequisitesValid).toBe(true);
  });
+
 });
-*/

 function setupMocks({
  vehicleMakeQuestionCmsContent = {},
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@ -42,7 +42,7 @@
            };
        },

-        async beforeRouteEnter(to, from, next) {            
+        async beforeRouteEnter(to, from, next) {       
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
@ -76,6 +76,13 @@
              this.$route
            );
          },
+          arePagePrerequisitesValid() {
+            console.log(this.mainStore.order)
+            if (this.mainStore.order.vehicle.year){
+              return true;
+            }
+            return false;
+          },
        },
        components: {
            makeQuestion,
@ -83,5 +90,14 @@
            siteSubHeader,
            vehicleBanner,
        },
+        watch: {
+          selectedMake(make) {
+            this.mainStore.updateVehicleMake(make); 
+            this.$router.navigate(
+              this.navigationScenarios.SELECTED_MAKE,
+              this.$route
+            );
+          },
+        },
    };
 </script>
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@ -65,6 +65,22 @@
        );
      });
    },
+
+    watch: {
+      selectedYear(year) {
+        const parsedYear = parseInt(year);
+        this.mainStore.updateVehicleYear(parsedYear); 
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_YEAR,
+          this.$route
+        );
+      },
+    },
+    methods: {
+      arePagePrerequisitesValid() {
+        return true;
+      },
+    },
    
    components: {
      yearQuestion,
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@ -40,8 +40,6 @@
        },
        set: function(newValue) {
          this.$emit("update:modelValue", newValue);
-          this.mainStore.updateVehicleYear(newValue);
-          this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route)
        }
      }
    },
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@ -48,7 +48,7 @@ const routingTable = function(store) {
      maps: [
        {
          scenario: navigationScenarios.CLICKED_FORWARD,
-          destinationIssPageValue: issPageValues.VEHICLE_MAKE,
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR,
        },
        {
          scenario: navigationScenarios.CLICKED_TEST,
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@ -0,0 +1,6 @@
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+  background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -19,6 +19,7 @@ module.exports = {
        @import "@/styles/ux-variables.scss";
        @import "./node_modules/bootstrap/scss/variables";
        @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
        `,
      },
    },
--- a/vue.release.config.js
+++ b/vue.release.config.js
@ -17,10 +17,11 @@ module.exports = {
        @import "@/styles/ux-variables.scss";
        @import "./node_modules/bootstrap/scss/variables";
        @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
        `,
      },
    },
-  },
+  },  
  configureWebpack: {
    devtool: 'source-map'
  },