From a683627d955bbd1249e6cb6471eb05bd806f86e1 Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Tue, 10 Jan 2023 15:18:30 -0500
Subject: [PATCH 1/4] Match the method signature on navigate()

The unmatched method signature is causing pageData not being updated correctly.
---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index e5947696..165215ad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -129,7 +129,7 @@ router.overrideNavigation = (
 
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
 
-    navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
+    navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
   
   }
 

From 9b1772c63198f5f09ec2ec41cceb608ec3627699 Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Tue, 10 Jan 2023 16:13:45 -0500
Subject: [PATCH 2/4] Add placeholder pages

Placeholder pages for pages that don't exist yet but needed so the navigation in the lookup pages can be tested.
---
 .../capability-questions.vue                  | 89 +++++++++++++++++++
 .../coverage-statement/coverage-statement.vue | 89 +++++++++++++++++++
 .../molding-questions/molding-questions.vue   | 89 +++++++++++++++++++
 src/router/router-constants/issPage-values.js |  1 +
 4 files changed, 268 insertions(+)
 create mode 100644 src/layouts/capability-questions/capability-questions.vue
 create mode 100644 src/layouts/coverage-statement/coverage-statement.vue
 create mode 100644 src/layouts/molding-questions/molding-questions.vue

diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
new file mode 100644
index 00000000..e331206b
--- /dev/null
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -0,0 +1,89 @@
+<template>
+  <Form
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+    v-slot="{ meta }"
+  >
+    <div class="page-container-grouped-styles overflow-auto">
+      <siteHeader
+        cmsWidgetName="SiteHeaderWidget"
+      />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
+      <siteSubHeader
+        cmsWidgetName="SiteSubHeaderWidget"
+      />
+      <div class="fade-on-route-transition sub-container make-tall mt-5">
+        <p>Placeholder for capability-questions page</p>
+
+        <siteFooter
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="backButtonAction"
+          @forwardClicked="forwardButtonAction"
+          ref="siteFooter"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
+<script>
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
+
+// Import Component
+import baseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from 'vee-validate';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+
+export default {
+  name: 'capability-questions',
+  mixins: [baseFormMixin],
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    Form,
+    vehicleBanner,    
+  },  
+  data() {
+    return {};
+  },  
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: 'cmsContent',
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    backButtonAction() {
+      /**
+       * this.navigationScenarios comes from base-mixin
+       */
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {},    
+    resetDependentState() {},
+  },
+};
+</script>
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
new file mode 100644
index 00000000..71b67275
--- /dev/null
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -0,0 +1,89 @@
+<template>
+  <Form
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+    v-slot="{ meta }"
+  >
+    <div class="page-container-grouped-styles overflow-auto">
+      <siteHeader
+        cmsWidgetName="SiteHeaderWidget"
+      />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
+      <siteSubHeader
+        cmsWidgetName="SiteSubHeaderWidget"
+      />
+      <div class="fade-on-route-transition sub-container make-tall mt-5">
+        <p>Placeholder for coverage-statement page</p>
+
+        <siteFooter
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="backButtonAction"
+          @forwardClicked="forwardButtonAction"
+          ref="siteFooter"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
+<script>
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
+
+// Import Component
+import baseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from 'vee-validate';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+
+export default {
+  name: 'coverage-statement',
+  mixins: [baseFormMixin],
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    Form,
+    vehicleBanner,    
+  },  
+  data() {
+    return {};
+  },  
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: 'cmsContent',
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    backButtonAction() {
+      /**
+       * this.navigationScenarios comes from base-mixin
+       */
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {},    
+    resetDependentState() {},
+  },
+};
+</script>
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
new file mode 100644
index 00000000..155d8552
--- /dev/null
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -0,0 +1,89 @@
+<template>
+  <Form
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+    v-slot="{ meta }"
+  >
+    <div class="page-container-grouped-styles overflow-auto">
+      <siteHeader
+        cmsWidgetName="SiteHeaderWidget"
+      />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
+      <siteSubHeader
+        cmsWidgetName="SiteSubHeaderWidget"
+      />
+      <div class="fade-on-route-transition sub-container make-tall mt-5">
+        <p>Placeholder for molding-questions page</p>
+
+        <siteFooter
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="backButtonAction"
+          @forwardClicked="forwardButtonAction"
+          ref="siteFooter"
+        />
+      </div>
+    </div>
+  </Form>
+</template>
+<script>
+// Import Supporting Files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { settleAllPromises } from '@/helpers/layout-helper';
+
+// Import Component
+import baseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from 'vee-validate';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+
+export default {
+  name: 'molding-questions',
+  mixins: [baseFormMixin],
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    Form,
+    vehicleBanner,    
+  },  
+  data() {
+    return {};
+  },  
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: 'cmsContent',
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    backButtonAction() {
+      /**
+       * this.navigationScenarios comes from base-mixin
+       */
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {},    
+    resetDependentState() {},
+  },
+};
+</script>
diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js
index af17bd8f..c8200c6a 100644
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@@ -13,6 +13,7 @@ export const issPageValues = {
     PART_QUESTIONS: "part-questions",
     MOLDING_QUESTIONS: "molding-questions",
     CAPABILITY_QUESTIONS: "capability-questions",
+    COVERAGE_STATEMENT: "coverage-statement",
     REVEAL: "reveal",
     ESTIMATE: "estimate",
     ADDRESS_VEHICLES: "address-vehicles",

From f8766cac89463d198914161b3ace9e16e4d529de Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Tue, 10 Jan 2023 17:05:31 -0500
Subject: [PATCH 3/4] Add updateVehicleVin action

Might be used in license-plate-lookup and/or address-lookup as well. It is used in vin-lookup page.
---
 src/store/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/store/index.js b/src/store/index.js
index 90065277..9f3c1e3b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -365,6 +365,10 @@ export const useMainStore = defineStore({
         this.order.vehicle.imageColor = vehicle.imageColor;
       },
 
+      updateVehicleVin(vin) {
+        this.order.vehicle.vin = vin;
+      },
+
       resetVehicleState()
       {
         this.order.vehicle.year = null;

From 43fa1c7270d43c0a79443475a0d9959c60585d60 Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Tue, 10 Jan 2023 20:41:05 -0500
Subject: [PATCH 4/4] Add more properties to be updated

---
 src/store/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index 9f3c1e3b..25ecd268 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -358,11 +358,19 @@ export const useMainStore = defineStore({
     },
 
       updateVehicle(vehicle) {
+        // Assuming that the method caller pass all the properties.
+        //   otherwise need to check for undefined for every property.
+        
         this.order.vehicle.carId = vehicle.carId;
         this.order.vehicle.category = vehicle.category;
+        this.order.vehicle.year = vehicle.year;
+        this.order.vehicle.make = vehicle.make;
+        this.order.vehicle.model = vehicle.model;
+        this.order.vehicle.style = vehicle.style;
+        this.order.vehicle.vin = vehicle.vin;
         this.order.vehicle.imageUrl = vehicle.imageUrl;
         this.order.vehicle.imageVifNumber = vehicle.imageVifNumber;
-        this.order.vehicle.imageColor = vehicle.imageColor;
+        this.order.vehicle.imageColor = vehicle.imageVifColor;
       },
 
       updateVehicleVin(vin) {