From 766435ad3aa8670ff5e4aef27aeefa997ab0c794 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 28 Sep 2023 11:40:04 -0400
Subject: [PATCH 1/7] Changed v-show to v-if to ensure proper hiding of link,
 no idea why this was needed

---
 .../service-location/shop-question/shop-question.spec.js | 9 +++++++--
 .../service-location/shop-question/shop-question.vue     | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js
index c4efdea91..99329c3b9 100644
--- a/src/layouts/service-location/shop-question/shop-question.spec.js
+++ b/src/layouts/service-location/shop-question/shop-question.spec.js
@@ -311,8 +311,7 @@ describe("shop-question.vue", () => {
         const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
 
         // Assert
-        expect(showMoreShopsLink.exists()).toBe(true);
-        expect(showMoreShopsLink.isVisible()).toBe(false);
+        expect(showMoreShopsLink.exists()).toBe(false);
     });
 
     it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
@@ -375,6 +374,12 @@ describe("shop-question.vue", () => {
         await wrapper.vm.$nextTick();
         await wrapper.vm.$nextTick();
 
+        await wrapper.setData({
+            displaySeeMoreLocationsLink: true
+        });
+
+        await wrapper.vm.$nextTick();
+
         const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
 
         await wrapper.vm.$nextTick();
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index 17153f9c9..7a32baf90 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -22,7 +22,7 @@
                 validationRules="option-required"
                 :additionalButtonData="additionalButtonData" />
             <textLink
-                v-show="displaySeeMoreLocationsLink"
+                v-if="displaySeeMoreLocationsLink"
                 ref="showMoreShopsLink"
                 class="show-more-shops-link"
                 id="showMoreShopsId"

From 935d22668e425672a169f9eba2b0bb88696f7dea Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 28 Sep 2023 11:41:13 -0400
Subject: [PATCH 2/7] Prettified

---
 .../service-location/shop-question/shop-question.spec.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js
index 99329c3b9..2904af1a9 100644
--- a/src/layouts/service-location/shop-question/shop-question.spec.js
+++ b/src/layouts/service-location/shop-question/shop-question.spec.js
@@ -375,7 +375,7 @@ describe("shop-question.vue", () => {
         await wrapper.vm.$nextTick();
 
         await wrapper.setData({
-            displaySeeMoreLocationsLink: true
+            displaySeeMoreLocationsLink: true,
         });
 
         await wrapper.vm.$nextTick();

From b662ee4a997e70f243691155eb55078a2540a338 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 28 Sep 2023 13:41:04 -0400
Subject: [PATCH 3/7] CSR-1413

add routing from review to payment-method.
also move the submit work order from review to payment-method and await it.
---
 src/helpers/heritage-integration/order-helper.js  |  7 +++++++
 src/layouts/confirmation/confirmation.vue         |  4 +++-
 src/layouts/customer-details/customer-details.vue |  2 --
 src/layouts/payment-method/payment-method.vue     | 11 ++++++++---
 src/layouts/review/review.vue                     | 11 ++++++++++-
 src/mixins/base-mixin.js                          |  8 --------
 src/router/index.js                               |  7 -------
 src/router/router-constants/routing-table.js      |  8 ++++++++
 src/store/index.js                                |  1 +
 9 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/helpers/heritage-integration/order-helper.js b/src/helpers/heritage-integration/order-helper.js
index addca2d41..cb80cba86 100644
--- a/src/helpers/heritage-integration/order-helper.js
+++ b/src/helpers/heritage-integration/order-helper.js
@@ -72,6 +72,13 @@ export async function saveSession({ pageNameToLog, shouldAwaitSaveSessionQueue =
     }
 }
 
+export async function submitWorkOrder({ pageNameToLog }) {
+    await saveSession({
+        pageNameToLog: pageNameToLog,
+        shouldAwaitSaveSessionQueue: true,
+    });
+}
+
 // PRIVATE FUNCTIONS //
 
 /*
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 6c4645901..6e913fdf5 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -77,7 +77,9 @@ export default {
 
             return serviceLocationReqs && scheduleReqs;
         },
-        forwardButtonAction() {},
+        forwardButtonAction() {
+            window.location.replace("https://safelite.com");
+        },
     },
     components: {
         funnelHeader,
diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue
index 03de9ff97..34a585c1e 100644
--- a/src/layouts/customer-details/customer-details.vue
+++ b/src/layouts/customer-details/customer-details.vue
@@ -82,7 +82,6 @@ import { routerParams } from "@/router/router-constants/router-params";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
 import { useField, validate } from "vee-validate";
-import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import store from "@/store";
 
 // DEFINE VALIDATION RULES
@@ -178,7 +177,6 @@ export default {
                 false
             );
 
-            this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
     },
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index f261c9c1f..78dbc3718 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -22,6 +22,7 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -58,9 +59,13 @@ export default {
             // TODO
             return true;
         },
-        backButtonAction() {},
-        forwardButtonAction() {
-            this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {
+            this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
+            await submitWorkOrder({ pageNameToLog: "payment-method" });
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
     },
     components: {
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 639fd0fd5..f30f6f6ac 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -125,6 +125,9 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
 
+// Validation
+import { Form } from "vee-validate";
+
 export default {
     name: "review",
     async beforeRouteEnter(to, from, next) {
@@ -231,7 +234,12 @@ export default {
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-        forwardButtonAction() {},
+        forwardButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
+        },
         editVehicle() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_VEHICLE_EDIT,
@@ -310,6 +318,7 @@ export default {
         serviceLocationReview,
         scheduleReview,
         customerReview,
+        Form,
     },
 };
 </script>
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index b1678fa25..b984bc565 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -91,7 +91,6 @@ export default {
                     lineItem.partType != partTypeStrings.RAIN_DEFENSE
                 );
             });
-            console.log("step one", lineItemsToPrice);
             let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
             return totalPrice;
         },
@@ -113,14 +112,7 @@ export default {
                         lineItem.childParts
                     );
                 }
-                console.log(
-                    "step two, lineItem name: ",
-                    lineItem.partNumber,
-                    " / totalPrice: ",
-                    totalPrice
-                );
             });
-            console.log("step three", totalPrice);
             return totalPrice;
         },
         getTotalLineItemPrice(lineItem) {
diff --git a/src/router/index.js b/src/router/index.js
index eadf3b9f6..04772febd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,14 +29,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
-import review from "@/layouts/review/review";
-import paymentMethod from "@/layouts/payment-method/payment-method";
 const routes = [
-    {
-        path: "/payment-method", // This is a temporary route for testing.
-        name: "payment-method",
-        component: paymentMethod,
-    },
     {
         path: "/",
         name: "root",
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index a2796ed0e..141186d23 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -465,11 +465,19 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_CUSTOMER_EDIT,
                     destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
+                },
             ],
         },
         {
             fmgPageValue: fmgPageValues.PAYMENT_METHOD,
             maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.REVIEW,
+                },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationFmgPageValue: fmgPageValues.CONFIRMATION,
diff --git a/src/store/index.js b/src/store/index.js
index 0c9a55c41..23e8ca8e0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -504,6 +504,7 @@ export const mutations = {
 
 // Export Getters
 export const getters = {
+    submitAfterSave: (state) => state.submitAfterSave,
     vehicle: (state) => state.order.vehicle,
     eventBusItem: (state) => (eventCategory, eventSubCategory) => {
         const matchedEvent = state.applicationUser.eventBus.find(

From f9f69f827dc9685b9b319d0ef92dac3882ed7954 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 28 Sep 2023 13:44:52 -0400
Subject: [PATCH 4/7] CSR-1413

prettier
---
 src/layouts/payment-method/payment-method.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 78dbc3718..90c3d0136 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -65,7 +65,10 @@ export default {
         async forwardButtonAction() {
             this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
             await submitWorkOrder({ pageNameToLog: "payment-method" });
-            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
         },
     },
     components: {

From 4af8f07a29393b05f93ddc6938bf33549dd59a84 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 28 Sep 2023 15:16:28 -0400
Subject: [PATCH 5/7] Set header to responsive 6-columns. Position alert
 relative on page.

---
 .../funnel-header/funnel-header.vue           |  7 ++----
 .../funnel-header/menu-modal/menu-modal.vue   | 24 +++++++++----------
 .../questions-page-layout.vue                 |  4 ++--
 src/layouts/address-lookup/address-lookup.vue |  4 ++--
 .../address-vehicles/address-vehicles.vue     |  4 ++--
 src/layouts/estimate/estimate.vue             |  4 ++--
 .../license-plate-lookup.vue                  |  4 ++--
 src/layouts/quote/quote.vue                   |  4 ++--
 src/layouts/schedule/schedule.vue             |  4 ++--
 .../service-location/service-location.vue     |  4 ++--
 src/layouts/vehicle-damage/vehicle-damage.vue |  4 ++--
 src/layouts/vehicle-parts/vehicle-parts.vue   |  4 ++--
 src/layouts/vehicle/vehicle.vue               |  5 ++--
 src/layouts/vin-lookup/vin-lookup.vue         |  4 ++--
 src/styles/common-styles.scss                 |  1 +
 15 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index acfacd709..b5775e649 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -7,7 +7,7 @@
     </div>
     <alert
         v-if="displayGlobalAlert"
-        class="position-absolute rounded-0 w-100 border-0 shadow-sm"
+        class="rounded-0 w-100 border-0 shadow-sm"
         cmsWidgetName="GlobalAlert"
         :manualHeadline="globalAlertMessage.messageHeadline"
         :manualCopy="globalAlertMessage.messageCopy"
@@ -63,14 +63,11 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
+    position: relative;
     padding: 0.97rem 0;
 }
 
 .logo-image {
     max-width: 78px;
 }
-.alert {
-    left: 0;
-    top: 72px;
-}
 </style>
diff --git a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
index aac390739..f9660966f 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -1,4 +1,16 @@
 <template>
+    <div class="menu-modal-container">
+        <button
+            class="menu-button"
+            type="button"
+            :class="[isActive ? 'active' : '']"
+            @click="toggleModal"
+            aria-label="Hamburger Menu (modal window)">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+        </button>
+    </div>
     <div class="menu-modal-container">
         <button
             class="menu-button"
@@ -20,18 +32,6 @@
         aria-labelledby="footerModalLabel"
         aria-hidden="true"
         v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
-        <div class="menu-modal-container">
-            <button
-                class="menu-button"
-                type="button"
-                :class="[isActive ? 'active' : '']"
-                @click="toggleModal"
-                aria-label="Hamburger Menu (modal window)">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </button>
-        </div>
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
diff --git a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
index 589a7c938..29b92f2b8 100644
--- a/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
+++ b/src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
@@ -2,8 +2,8 @@
     <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 3b75d7a73..08833dc2c 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -6,8 +6,8 @@
         v-slot="{ meta }"
         autocomplete="off">
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                 </div>
             </div>
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 62f8b08f9..eb6a6eccd 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index b965f8294..4fc6a1bc1 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 146b618c6..c72ca9f52 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 160e74389..c61394f3a 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index a9fcadce8..fccef82e1 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 52ce60c67..b17d7bb26 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 51e52f0e3..e6d4c01f8 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid page-container-grouped-styles vehicle-damage">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index d2a20ac8e..855394ce3 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -3,8 +3,8 @@
         <div class="vehicle-parts small-question-text">
             <loadingModal ref="loadingModal" />
             <div class="container-fluid page-container-grouped-styles">
-                <div class="row">
-                    <div class="col">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
                         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                     </div>
                 </div>
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 494027bb9..429f6cdfa 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -1,8 +1,8 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="container-fluid">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
@@ -48,7 +48,6 @@
                         validationRules="style-required"
                         placeHolderText="Select style"
                         inputId="styleQuestionField" />
-                    <div class="col-md-3">&nbsp;</div>
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="displayGeneric"
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index cbadaed78..db6070c26 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -2,8 +2,8 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
         <div class="container-fluid page-container-grouped-styles">
-            <div class="row">
-                <div class="col">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                 </div>
             </div>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 406b3ee53..bb04e2298 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -7,6 +7,7 @@ body {
     .container-fluid {
         max-width: 1400px;
         padding: 0 1.5rem;
+        position: relative;
         .prevent-squish {
             overflow-x: unset;
         }

From 1653a6b4e3be16ee02a4193d7713ce1a83066043 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 29 Sep 2023 08:11:16 -0400
Subject: [PATCH 6/7] CSR-1413

test coverage
---
 .../heritage-integration/order-helper.spec.js | 111 +++++++++++++++++-
 .../payment-method/payment-method.spec.js     |  58 ++++++++-
 src/store/store.spec.js                       |  11 ++
 3 files changed, 178 insertions(+), 2 deletions(-)

diff --git a/src/helpers/heritage-integration/order-helper.spec.js b/src/helpers/heritage-integration/order-helper.spec.js
index 94e52b1dd..1cae9fe18 100644
--- a/src/helpers/heritage-integration/order-helper.spec.js
+++ b/src/helpers/heritage-integration/order-helper.spec.js
@@ -1,5 +1,5 @@
 import * as cookieHelper from "@/helpers/heritage-integration/cookie-helper";
-import { loadSessionIfPresent, saveSession } from "@/helpers/heritage-integration/order-helper";
+import { loadSessionIfPresent, saveSession, submitWorkOrder } from "@/helpers/heritage-integration/order-helper";
 import { cookieNames } from "@/constants/cookie-names";
 import {
     setupMocksForJsFiles,
@@ -239,3 +239,112 @@ describe("saveSession", () => {
         expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);
     });
 });
+
+
+describe("submitWorkOrder", () => {
+    afterEach(() => {
+        removeAllTestCookies();
+    });
+
+    test("submitWorkOrder => should set state order values", async () => {
+        // Arrange
+        const mockReferralNumber = "2";
+        const mockCorrelationId = "55";
+        const mockReferralDate = "2022";
+        const mockParentAccountNumber = "167132";
+        const mockSavedSessionId = "xxx-xxx-xxx";
+        const mockCrmCustomerId = "xxx-xxx-xxx";
+
+        const mockOrderInfo = getMockOrderInfo(
+            mockReferralNumber,
+            mockCorrelationId,
+            mockReferralDate,
+            mockParentAccountNumber,
+            mockSavedSessionId,
+            mockCrmCustomerId
+        );
+
+        const mockData = {
+            actionList: [
+                {
+                    actionName: storeActions.SAVE_SESSION,
+                    data: mockOrderInfo,
+                },
+                {
+                    actionName: storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE,
+                },
+            ],
+        };
+
+        const mocks = setupMocksForJsFiles(mockData);
+
+        // Act
+        await submitWorkOrder({ pageNameToLog: "test" });
+
+        // Assert
+        expect(mocks.baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
+            storeActions.SAVE_SESSION,
+            null,
+            "test"
+        );
+        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(
+            storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE,
+            {
+                referralNumber: mockReferralNumber,
+                referralDate: mockReferralDate,
+                referralCorrelationId: mockCorrelationId,
+                parentAccountNumber: mockParentAccountNumber,
+                savedSessionId: mockSavedSessionId,
+                crmCustomerId: mockCrmCustomerId,
+            },
+            false
+        );
+    });
+
+    test("submitWorkOrder => should update DidHeritageFunnelUpdateLast cookie value to false", async () => {
+        // Arrange
+        const mockReferralNumber = 1566818;
+        const mockReferralDate = "2022-03-15T10:56:24.597";
+        const mockReferralCorrelationId = "404d2b04-f86e-45c3-b373-127b6217b060";
+        const mockParentAccountNumber = "167132";
+        const mockSavedSessionId = "xxx-xxx-xxx";
+        const mockCrmCustomerId = "xxx-xxx-xxx";
+
+        const mockOrderInfo = getMockOrderInfo(
+            mockReferralNumber,
+            mockReferralCorrelationId,
+            mockReferralDate,
+            mockParentAccountNumber,
+            mockSavedSessionId,
+            mockCrmCustomerId
+        );
+
+        const mockData = {
+            actionList: [
+                {
+                    actionName: storeActions.SAVE_SESSION,
+                    data: mockOrderInfo,
+                },
+            ],
+            router: router,
+        };
+
+        setupMocksForJsFiles(mockData);
+
+        const testCookieValue = {
+            ReferralNumber: mockReferralNumber,
+            ReferralDate: mockReferralDate,
+            ReferralCorrelationId: mockReferralCorrelationId,
+            ShouldResetState: false,
+            DidHeritageFunnelUpdateLast: true,
+        };
+
+        setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
+
+        // Act
+        await submitWorkOrder({ pageNameToLog: "test" });
+
+        // Assert
+        expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);
+    });
+});
\ No newline at end of file
diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 3d0843e10..e657a9258 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -1 +1,57 @@
-test.todo("some test to be written in the future");
+// Components
+import customerDetails from "@/layouts/payment-method/payment-method.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
+    submitWorkOrder: jest.fn(),
+}));
+
+describe("payment-method.vue", () => {
+    describe("navigation", () => {
+        test("if the back button is clicked, navigate back", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
+
+            // Act
+            await wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+        });
+
+        test("if the continue button is clicked, navigate forward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+        });
+    });
+});
+
+function setupMocks() {
+    const wrapper = shallowMount(
+        customerDetails,
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+                navigate: jest.fn(),
+                navigateWithSaving: jest.fn(),
+                navigateWithoutSaving: jest.fn(),
+            },
+        })
+    );
+
+    return { wrapper };
+}
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index bdb81279d..fa1c3cebc 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -2767,6 +2767,17 @@ describe("Actions", () => {
 });
 
 describe("Getters", () => {
+    it("submitAfterSave, should return true", () => {
+        // Arrange
+        const storeState = state;
+
+        // Act
+        mutations.updateWorkOrderFlag(storeState, true);
+
+        // Assert
+        expect(getters.submitAfterSave(storeState)).toEqual(true);
+    });
+    
     it("Vehicle getter, should return vehicle data", () => {
         // Arrange
         const storeState = state;

From 5abc6f590dd1bd35d0f88a87c64b5e1a3c87fd6f Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 29 Sep 2023 08:23:57 -0400
Subject: [PATCH 7/7] CSR-1413

more prettier
---
 src/helpers/heritage-integration/order-helper.spec.js | 9 ++++++---
 src/store/store.spec.js                               | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/helpers/heritage-integration/order-helper.spec.js b/src/helpers/heritage-integration/order-helper.spec.js
index 1cae9fe18..322d9237d 100644
--- a/src/helpers/heritage-integration/order-helper.spec.js
+++ b/src/helpers/heritage-integration/order-helper.spec.js
@@ -1,5 +1,9 @@
 import * as cookieHelper from "@/helpers/heritage-integration/cookie-helper";
-import { loadSessionIfPresent, saveSession, submitWorkOrder } from "@/helpers/heritage-integration/order-helper";
+import {
+    loadSessionIfPresent,
+    saveSession,
+    submitWorkOrder,
+} from "@/helpers/heritage-integration/order-helper";
 import { cookieNames } from "@/constants/cookie-names";
 import {
     setupMocksForJsFiles,
@@ -240,7 +244,6 @@ describe("saveSession", () => {
     });
 });
 
-
 describe("submitWorkOrder", () => {
     afterEach(() => {
         removeAllTestCookies();
@@ -347,4 +350,4 @@ describe("submitWorkOrder", () => {
         // Assert
         expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);
     });
-});
\ No newline at end of file
+});
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index fa1c3cebc..d55862e3e 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -2777,7 +2777,7 @@ describe("Getters", () => {
         // Assert
         expect(getters.submitAfterSave(storeState)).toEqual(true);
     });
-    
+
     it("Vehicle getter, should return vehicle data", () => {
         // Arrange
         const storeState = state;