From 51f46481120a3b50d7cefc5c3b0cb11040ec65e6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 20 Sep 2023 10:26:43 -0400
Subject: [PATCH 01/13] CSR-1592 desktop adjustments

Settings for menu-modal, set l/r padding for container-fluid, wrap questions-page-layout in responsive container.
---
 .../funnel-header/menu-modal/menu-modal.vue   |  6 +-
 .../questions-page-layout.vue                 | 66 +++++++++++--------
 src/styles/common-styles.scss                 |  1 +
 3 files changed, 42 insertions(+), 31 deletions(-)

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 ffd3352ee..65dc418d8 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -158,7 +158,7 @@ export default {
 }
 .modal {
     &.menu-modal {
-        max-width: 576px;
+        //max-width: 576px;
         left: auto;
         height: calc(100% - 72px);
         top: 72px;
@@ -175,7 +175,7 @@ export default {
         }
         .modal-fullscreen {
             width: 100vw;
-            max-width: 576px;
+            //max-width: 576px;
         }
         .navigation-link {
             margin-bottom: 1.5rem;
@@ -188,7 +188,7 @@ export default {
             position: absolute;
             padding: 1.47rem 1rem 1.47rem 1.47rem;
             right: 0;
-            top: -4.5rem;
+            top: -5rem;
             button {
                 border: none;
                 &.menu-button {
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 801987e31..ec324f5ed 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
@@ -1,34 +1,44 @@
 <template>
-    <div :class="`page-container-grouped-styles questions-page`">
+    <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
-        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <div class="fade-on-route-transition sub-container make-tall">
-            <alert
-                ref="alertFewMoreQuestions"
-                cmsWidgetName="alertWidget"
-                class="my-5"
-                alertClass="alert-warning"
-                :manualHeadline="alertFewMoreQuestionsHeader"
-                :manualCopy="alertFewMoreQuestionsCopy"
-                v-bind:isDismissible="false" />
-            <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
-                <questionChain
-                    ref="questionChain"
-                    v-model="selectedAnswers[questionsDatum.answerKey]"
-                    :questionData="questionsDatum.questions"
-                    :index="i"
-                    v-if="showThisQuestionChain(questionsDatum, i)"
-                    :answerKey="questionsDatum.answerKey"
-                    :validationRules="validationRules" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                    <div class="fade-on-route-transition sub-container make-tall">
+                        <alert
+                        ref="alertFewMoreQuestions"
+                        cmsWidgetName="alertWidget"
+                        class="my-5"
+                        alertClass="alert-warning"
+                        :manualHeadline="alertFewMoreQuestionsHeader"
+                        :manualCopy="alertFewMoreQuestionsCopy"
+                        v-bind:isDismissible="false" />
+                        <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
+                            <questionChain
+                            ref="questionChain"
+                            v-model="selectedAnswers[questionsDatum.answerKey]"
+                            :questionData="questionsDatum.questions"
+                            :index="i"
+                            v-if="showThisQuestionChain(questionsDatum, i)"
+                            :answerKey="questionsDatum.answerKey"
+                            :validationRules="validationRules" />
+                        </div>
+                        <navbar
+                        ref="navbar"
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!isMetaValid"
+                        @back-clicked="handleBackButtonAction"
+                        @ForwardClicked="handleForwardButtonAction" />
+                    </div>
+                </div>
             </div>
-            <navbar
-                ref="navbar"
-                cmsWidgetName="FunnelFooterWidget"
-                :isForwardActionDisabled="!isMetaValid"
-                @back-clicked="handleBackButtonAction"
-                @ForwardClicked="handleForwardButtonAction" />
         </div>
     </div>
 </template>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 9c886d30f..86a98c94c 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,6 +6,7 @@ body {
     color: #4d5151;
     .container-fluid {
         max-width: 1400px;
+        padding: 0 1.5rem;
         .prevent-squish {
             overflow-x: unset;
         }

From e6f77454303c117f18d2c5aae736aaaeab8bf1bd Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 20 Sep 2023 10:28:16 -0400
Subject: [PATCH 02/13] Format code.

---
 .../funnel-header/menu-modal/menu-modal.vue   |  2 -
 .../questions-page-layout.vue                 | 42 ++++++++++---------
 2 files changed, 22 insertions(+), 22 deletions(-)

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 65dc418d8..aac390739 100644
--- a/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
+++ b/src/fmg-components/funnel-header/menu-modal/menu-modal.vue
@@ -158,7 +158,6 @@ export default {
 }
 .modal {
     &.menu-modal {
-        //max-width: 576px;
         left: auto;
         height: calc(100% - 72px);
         top: 72px;
@@ -175,7 +174,6 @@ export default {
         }
         .modal-fullscreen {
             width: 100vw;
-            //max-width: 576px;
         }
         .navigation-link {
             margin-bottom: 1.5rem;
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 ec324f5ed..af6a30fdb 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
@@ -9,33 +9,35 @@
             </div>
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
-                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                     <div class="fade-on-route-transition sub-container make-tall">
                         <alert
-                        ref="alertFewMoreQuestions"
-                        cmsWidgetName="alertWidget"
-                        class="my-5"
-                        alertClass="alert-warning"
-                        :manualHeadline="alertFewMoreQuestionsHeader"
-                        :manualCopy="alertFewMoreQuestionsCopy"
-                        v-bind:isDismissible="false" />
+                            ref="alertFewMoreQuestions"
+                            cmsWidgetName="alertWidget"
+                            class="my-5"
+                            alertClass="alert-warning"
+                            :manualHeadline="alertFewMoreQuestionsHeader"
+                            :manualCopy="alertFewMoreQuestionsCopy"
+                            v-bind:isDismissible="false" />
                         <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                             <questionChain
-                            ref="questionChain"
-                            v-model="selectedAnswers[questionsDatum.answerKey]"
-                            :questionData="questionsDatum.questions"
-                            :index="i"
-                            v-if="showThisQuestionChain(questionsDatum, i)"
-                            :answerKey="questionsDatum.answerKey"
-                            :validationRules="validationRules" />
+                                ref="questionChain"
+                                v-model="selectedAnswers[questionsDatum.answerKey]"
+                                :questionData="questionsDatum.questions"
+                                :index="i"
+                                v-if="showThisQuestionChain(questionsDatum, i)"
+                                :answerKey="questionsDatum.answerKey"
+                                :validationRules="validationRules" />
                         </div>
                         <navbar
-                        ref="navbar"
-                        cmsWidgetName="FunnelFooterWidget"
-                        :isForwardActionDisabled="!isMetaValid"
-                        @back-clicked="handleBackButtonAction"
-                        @ForwardClicked="handleForwardButtonAction" />
+                            ref="navbar"
+                            cmsWidgetName="FunnelFooterWidget"
+                            :isForwardActionDisabled="!isMetaValid"
+                            @back-clicked="handleBackButtonAction"
+                            @ForwardClicked="handleForwardButtonAction" />
                     </div>
                 </div>
             </div>

From f1a5d0f0b42ccde0f49a32352f4a7c701fcfe80d Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Wed, 20 Sep 2023 20:02:08 +0530
Subject: [PATCH 03/13] confirmation page

basic confirmation page
---
 src/fmg-components/nav-bar/nav-bar.vue        |  17 ++-
 src/layouts/confirmation/confirmation.spec.js | 101 ++++++++++++++++++
 src/layouts/confirmation/confirmation.vue     |  87 +++++++++++++++
 src/layouts/payment-method/payment-method.vue |   4 +-
 src/router/router-constants/fmgPage-values.js |   1 +
 src/router/router-constants/routing-table.js  |  12 +++
 6 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/confirmation/confirmation.spec.js
 create mode 100644 src/layouts/confirmation/confirmation.vue

diff --git a/src/fmg-components/nav-bar/nav-bar.vue b/src/fmg-components/nav-bar/nav-bar.vue
index bb0cbc399..50365c572 100644
--- a/src/fmg-components/nav-bar/nav-bar.vue
+++ b/src/fmg-components/nav-bar/nav-bar.vue
@@ -2,7 +2,9 @@
     <div class="row"></div>
     <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
         <div class="row d-flex flex-row-reverse align-items-center vw-100">
-            <div class="col button-col d-flex" id="stacked">
+            <div 
+            :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
+            id="stacked">
                 <buttonMain
                     ref="buttonMain"
                     isPrimary
@@ -41,6 +43,7 @@ export default {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },
         cmsWidgetName: String,
+        buttonSize: { type: Boolean, default: false },
     },
     components: {
         textLink,
@@ -120,5 +123,17 @@ export default {
     & > .container-fluid {
         overflow-x: visible; // needed to fix hidden footer on some iphones
     }
+    .medium-button {
+        // Define styles for a medium button (default size)
+        justify-content: flex-end;
+        width: auto;
+    }
+    .large-button {
+        justify-content: center;
+        width: 100%;
+        .btn-primary {
+            width: 100%;           
+        }
+    }
 }
 </style>
diff --git a/src/layouts/confirmation/confirmation.spec.js b/src/layouts/confirmation/confirmation.spec.js
new file mode 100644
index 000000000..1f71aa033
--- /dev/null
+++ b/src/layouts/confirmation/confirmation.spec.js
@@ -0,0 +1,101 @@
+// Components
+import confirmation from "@/layouts/confirmation/confirmation.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+beforeEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    store.getters = {
+        order: {
+            schedule: {
+                date: "2019-01-01",
+                startTime: "09:00",
+                endTime: "10:00",
+                routeCode: "000",
+            },
+            lineItems: {
+                glassParts: [
+                    {
+                        partNumber: "ABC123",
+                    },
+                ],
+                supportingItems: [],
+            },
+            serviceLocation: {
+                address: "",
+                address2: null,
+                city: "",
+                state: "AZ",
+                appointmentType: "Inshop",
+                zipCode: "12345",
+                zipCodeCtu: "01234",
+                provider: {
+                    providerNumber: "123",
+                    address: {
+                        streetAddress: "test1",
+                        city: "test",
+                        state: "AZ",
+                        zipCode: "12345",
+                        zipCodeCtu: "01234",
+                    },
+                },
+            },
+            damage: {
+                isRepair: false,
+            },
+            referralNumber: "1234567",
+        },
+        payment: {
+            isInsurance: true,
+        },
+        lineItems: {
+            glassParts: [],
+            supportingItems: [],
+        },
+    };
+});
+afterEach(() => {
+    store.getters = {};
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+});
+
+describe("confirmation.vue", () => {
+    test("arePagePrerequisitesValid should be true ", async () => {
+        //Arrange
+        const { wrapper } = setupMocks();
+
+        //Act
+        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+        await nextTick();
+
+        //Assert
+        expect(arePagePrerequisitesValid).toBe(true);
+    });
+});
+
+function setupMocks() {
+    const wrapper = shallowMount(
+        confirmation,
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+                navigate: jest.fn(),
+                navigateWithSaving: jest.fn(),
+                navigateWithoutSaving: jest.fn(),
+            },
+        })
+    );
+
+    return { wrapper };
+}
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
new file mode 100644
index 000000000..765145e82
--- /dev/null
+++ b/src/layouts/confirmation/confirmation.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="page-container-grouped-styles position-relative">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        <div>
+            <div class="container-fluid pb-2">
+                <div class="row">
+                    <div class="col">
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            ref="navbar"
+                            isBackButtonHidden="true"
+                            @ForwardClicked="forwardButtonAction"
+                            :buttonSize="true" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+//Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+export default {
+    name: "confirmation",
+    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.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            // Service Location
+            const serviceLocation = store.getters.order.serviceLocation;
+            const mobileReqs = !!(
+                serviceLocation.address &&
+                serviceLocation.city &&
+                serviceLocation.state &&
+                serviceLocation.zipCode
+            );
+
+            const providerLocation = serviceLocation.provider.address;
+            const dropOffInshopReqs = !!(
+                providerLocation.streetAddress &&
+                providerLocation.city &&
+                providerLocation.state &&
+                providerLocation.zipCode
+            );
+
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+
+            const serviceLocationReqs =
+                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
+
+            // Schedule
+            const schedule = store.getters.order.schedule;
+            const scheduleReqs = !!(schedule.date && schedule.startTime);
+
+            return serviceLocationReqs && scheduleReqs;
+        },
+        forwardButtonAction() {},
+    },
+    components: {
+        funnelHeader,
+        navbar,
+    },
+};
+</script>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 268501b26..f261c9c1f 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -59,7 +59,9 @@ export default {
             return true;
         },
         backButtonAction() {},
-        forwardButtonAction() {},
+        forwardButtonAction() {
+            this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+        },
     },
     components: {
         funnelHeader,
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index ba931f77d..572b33e7c 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -17,6 +17,7 @@ const fmgPageValues = {
     CUSTOMER_DETAILS: "customer-details",
     REVIEW: "review",
     PAYMENT_METHOD: "payment-method",
+    CONFIRMATION: "confirmation",
 };
 
 export { fmgPageValues };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index f150d0a61..a2796ed0e 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -467,6 +467,18 @@ const routingTable = function (store) {
                 },
             ],
         },
+        {
+            fmgPageValue: fmgPageValues.PAYMENT_METHOD,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.CONFIRMATION,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.CONFIRMATION,
+        },
     ];
 };
 

From a39bf56a66b9251e52f532b6484d30fa284ab31e Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 20 Sep 2023 10:44:52 -0400
Subject: [PATCH 04/13] Fix navbar padding.

---
 src/fmg-components/nav-bar/nav-bar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/fmg-components/nav-bar/nav-bar.vue b/src/fmg-components/nav-bar/nav-bar.vue
index bb0cbc399..5aaef60f4 100644
--- a/src/fmg-components/nav-bar/nav-bar.vue
+++ b/src/fmg-components/nav-bar/nav-bar.vue
@@ -93,6 +93,7 @@ export default {
 .nav-bar {
     overflow: visible;
     display: flex;
+    padding: 0;
     a {
         display: flex;
         justify-content: center;

From ffb6895e4123ee738686c80a059939e45fceb4d4 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 20 Sep 2023 13:51:28 -0400
Subject: [PATCH 05/13] Remove errant code missed in last PR.

---
 .../questions-page-layout.vue                 | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

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 af6a30fdb..931ee4069 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
@@ -10,35 +10,39 @@
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-                    <div class="fade-on-route-transition sub-container make-tall">
-                        <alert
-                            ref="alertFewMoreQuestions"
-                            cmsWidgetName="alertWidget"
-                            class="my-5"
-                            alertClass="alert-warning"
-                            :manualHeadline="alertFewMoreQuestionsHeader"
-                            :manualCopy="alertFewMoreQuestionsCopy"
-                            v-bind:isDismissible="false" />
-                        <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
-                            <questionChain
-                                ref="questionChain"
-                                v-model="selectedAnswers[questionsDatum.answerKey]"
-                                :questionData="questionsDatum.questions"
-                                :index="i"
-                                v-if="showThisQuestionChain(questionsDatum, i)"
-                                :answerKey="questionsDatum.answerKey"
-                                :validationRules="validationRules" />
-                        </div>
-                        <navbar
-                            ref="navbar"
-                            cmsWidgetName="FunnelFooterWidget"
-                            :isForwardActionDisabled="!isMetaValid"
-                            @back-clicked="handleBackButtonAction"
-                            @ForwardClicked="handleForwardButtonAction" />
+
+                    <alert
+                    ref="alertFewMoreQuestions"
+                    cmsWidgetName="alertWidget"
+                    class="my-5"
+                    alertClass="alert-warning"
+                    :manualHeadline="alertFewMoreQuestionsHeader"
+                    :manualCopy="alertFewMoreQuestionsCopy"
+                    v-bind:isDismissible="false" />
+
+                    <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
+                        <questionChain
+                        ref="questionChain"
+                        v-model="selectedAnswers[questionsDatum.answerKey]"
+                        :questionData="questionsDatum.questions"
+                        :index="i"
+                        v-if="showThisQuestionChain(questionsDatum, i)"
+                        :answerKey="questionsDatum.answerKey"
+                        :validationRules="validationRules" />
+
                     </div>
+                    
+                    <navbar
+                    ref="navbar"
+                    cmsWidgetName="FunnelFooterWidget"
+                    :isForwardActionDisabled="!isMetaValid"
+                    @back-clicked="handleBackButtonAction"
+                    @ForwardClicked="handleForwardButtonAction" />
+
                 </div>
             </div>
         </div>

From 5f85566d44c6f879db90824a7ff9388b9e322440 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 20 Sep 2023 14:05:51 -0400
Subject: [PATCH 06/13] Format code.

---
 .../questions-page-layout.vue                 | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

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 931ee4069..bad812fee 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
@@ -10,39 +10,37 @@
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <alert
-                    ref="alertFewMoreQuestions"
-                    cmsWidgetName="alertWidget"
-                    class="my-5"
-                    alertClass="alert-warning"
-                    :manualHeadline="alertFewMoreQuestionsHeader"
-                    :manualCopy="alertFewMoreQuestionsCopy"
-                    v-bind:isDismissible="false" />
+                        ref="alertFewMoreQuestions"
+                        cmsWidgetName="alertWidget"
+                        class="my-5"
+                        alertClass="alert-warning"
+                        :manualHeadline="alertFewMoreQuestionsHeader"
+                        :manualCopy="alertFewMoreQuestionsCopy"
+                        v-bind:isDismissible="false" />
 
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
-                        ref="questionChain"
-                        v-model="selectedAnswers[questionsDatum.answerKey]"
-                        :questionData="questionsDatum.questions"
-                        :index="i"
-                        v-if="showThisQuestionChain(questionsDatum, i)"
-                        :answerKey="questionsDatum.answerKey"
-                        :validationRules="validationRules" />
-
+                            ref="questionChain"
+                            v-model="selectedAnswers[questionsDatum.answerKey]"
+                            :questionData="questionsDatum.questions"
+                            :index="i"
+                            v-if="showThisQuestionChain(questionsDatum, i)"
+                            :answerKey="questionsDatum.answerKey"
+                            :validationRules="validationRules" />
                     </div>
-                    
-                    <navbar
-                    ref="navbar"
-                    cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="!isMetaValid"
-                    @back-clicked="handleBackButtonAction"
-                    @ForwardClicked="handleForwardButtonAction" />
 
+                    <navbar
+                        ref="navbar"
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!isMetaValid"
+                        @back-clicked="handleBackButtonAction"
+                        @ForwardClicked="handleForwardButtonAction" />
                 </div>
             </div>
         </div>

From ab8de77033ba6af785f92dacacfef783843cd0d7 Mon Sep 17 00:00:00 2001
From: sheena <sheena.sukumaran@safelite.com>
Date: Thu, 21 Sep 2023 13:48:55 +0530
Subject: [PATCH 07/13] CSR-1598

Updated the button alignment and size to 327px acc to the mock
---
 src/fmg-components/nav-bar/nav-bar.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/fmg-components/nav-bar/nav-bar.vue b/src/fmg-components/nav-bar/nav-bar.vue
index 50365c572..23f856371 100644
--- a/src/fmg-components/nav-bar/nav-bar.vue
+++ b/src/fmg-components/nav-bar/nav-bar.vue
@@ -2,9 +2,9 @@
     <div class="row"></div>
     <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
         <div class="row d-flex flex-row-reverse align-items-center vw-100">
-            <div 
-            :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
-            id="stacked">
+            <div
+                :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
+                id="stacked">
                 <buttonMain
                     ref="buttonMain"
                     isPrimary
@@ -130,9 +130,9 @@ export default {
     }
     .large-button {
         justify-content: center;
-        width: 100%;
         .btn-primary {
-            width: 100%;           
+            width: 327px;
+            justify-content: center;
         }
     }
 }

From cf22c51a2209e3058429198d465510927abbb1d0 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 21 Sep 2023 14:05:18 +0530
Subject: [PATCH 08/13] Update confirmation.vue

---
 src/layouts/confirmation/confirmation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 765145e82..3a8af32de 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -73,7 +73,7 @@ export default {
 
             // Schedule
             const schedule = store.getters.order.schedule;
-            const scheduleReqs = !!(schedule.date && schedule.startTime);
+            const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
 
             return serviceLocationReqs && scheduleReqs;
         },

From 2a1ab3002b782fd678f3eb8f55ae899cc4ef19cc Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 21 Sep 2023 16:02:26 +0530
Subject: [PATCH 09/13] Update confirmation.vue

---
 src/layouts/confirmation/confirmation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 3a8af32de..765145e82 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -73,7 +73,7 @@ export default {
 
             // Schedule
             const schedule = store.getters.order.schedule;
-            const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
+            const scheduleReqs = !!(schedule.date && schedule.startTime);
 
             return serviceLocationReqs && scheduleReqs;
         },

From ea3d719765b77654dee3c0ddbe56772a5e7e4e85 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 21 Sep 2023 16:09:07 +0530
Subject: [PATCH 10/13] Update confirmation.vue

---
 src/layouts/confirmation/confirmation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 765145e82..3a8af32de 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -73,7 +73,7 @@ export default {
 
             // Schedule
             const schedule = store.getters.order.schedule;
-            const scheduleReqs = !!(schedule.date && schedule.startTime);
+            const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
 
             return serviceLocationReqs && scheduleReqs;
         },

From a09c88e06535205f1dea4fcde2936c3ad60f0661 Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Thu, 21 Sep 2023 18:13:52 +0530
Subject: [PATCH 11/13] Button width 100%

nav-bar large button width 100%
---
 src/fmg-components/nav-bar/nav-bar.vue    | 2 +-
 src/layouts/confirmation/confirmation.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/fmg-components/nav-bar/nav-bar.vue b/src/fmg-components/nav-bar/nav-bar.vue
index 23f856371..b9fadc2a0 100644
--- a/src/fmg-components/nav-bar/nav-bar.vue
+++ b/src/fmg-components/nav-bar/nav-bar.vue
@@ -131,7 +131,7 @@ export default {
     .large-button {
         justify-content: center;
         .btn-primary {
-            width: 327px;
+            width: 100%;
             justify-content: center;
         }
     }
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index 3a8af32de..a2ea31c0f 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -3,8 +3,8 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <div>
             <div class="container-fluid pb-2">
-                <div class="row">
-                    <div class="col">
+                <div class="row justify-content-md-center">
+                    <div class="col-md-6 col-xl-4">
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"

From 6828ae264dc6766266bd1c7b0732e3fa9ff7f2a0 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 21 Sep 2023 09:05:32 -0400
Subject: [PATCH 12/13] CSR-1593 fix address-vehicles page for responsive.

---
 .../address-vehicles/address-vehicles.vue     | 80 +++++++++++--------
 1 file changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 796649a40..910ec9c0a 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,38 +1,52 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <alert
-                ref="alertFoundMultipleVehicles"
-                class="my-5"
-                alertClass="alert-warning"
-                :manualHeadline="AlertFoundMultipleVehiclesHeader"
-                manualCopy=""
-                v-bind:isDismissible="false" />
-            <addressVehiclesQuestion
-                ref="addressVehiclesQuestion"
-                cmsWidgetName="VehicleConfirmationQuestion"
-                :vehicles="VehiclesForQuestions"
-                validationRules="vehicle-required"
-                v-model="selectedVehicleVin"
-                :isCarIdDifferent="isCarIdDifferent" />
-            <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
-                <textBlock
-                    :customText="AlertProvideVinBody"
-                    justifyText="left"
-                    class="mb-3"
-                    marginTopSizeOverride="3" />
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <alert
+                    ref="alertFoundMultipleVehicles"
+                    class="my-5"
+                    alertClass="alert-warning"
+                    :manualHeadline="AlertFoundMultipleVehiclesHeader"
+                    manualCopy=""
+                    v-bind:isDismissible="false" />
+
+                    <addressVehiclesQuestion
+                    ref="addressVehiclesQuestion"
+                    cmsWidgetName="VehicleConfirmationQuestion"
+                    :vehicles="VehiclesForQuestions"
+                    validationRules="vehicle-required"
+                    v-model="selectedVehicleVin"
+                    :isCarIdDifferent="isCarIdDifferent" />
+
+                    <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
+                        <textBlock
+                        :customText="AlertProvideVinBody"
+                        justifyText="left"
+                        class="mb-3"
+                        marginTopSizeOverride="3" />
+
+                    </div>
+
+                    <navbar
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="navbar"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
-            <navbar
-                cmsWidgetName="FunnelFooterWidget"
-                ref="navbar"
-                :isForwardActionDisabled="!meta.valid"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
         </div>
     </Form>
 </template>
@@ -208,7 +222,7 @@ export default {
             handler() {
                 // does this vehicle match the previously selected carId?
                 this.isCarIdDifferent =
-                    this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
+                this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
                 if (this.isCarIdDifferent) {
                     this.$refs.navbar.updateButtonText(
                         `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`

From b0b7635e08685113f5fe5e1e4a75eaa925209a6d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 21 Sep 2023 09:09:19 -0400
Subject: [PATCH 13/13] Format code.

---
 .../address-vehicles/address-vehicles.vue     | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 910ec9c0a..f7d1d624c 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -9,42 +9,41 @@
             <div class="row justify-content-md-center">
                 <div class="col-md-6 col-xl-4">
                     <vehicleBanner
-                    cmsWidgetName="VehicleBannerWidget"
-                    :displayGenericVehicleImage="false" />
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
 
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
 
                     <alert
-                    ref="alertFoundMultipleVehicles"
-                    class="my-5"
-                    alertClass="alert-warning"
-                    :manualHeadline="AlertFoundMultipleVehiclesHeader"
-                    manualCopy=""
-                    v-bind:isDismissible="false" />
+                        ref="alertFoundMultipleVehicles"
+                        class="my-5"
+                        alertClass="alert-warning"
+                        :manualHeadline="AlertFoundMultipleVehiclesHeader"
+                        manualCopy=""
+                        v-bind:isDismissible="false" />
 
                     <addressVehiclesQuestion
-                    ref="addressVehiclesQuestion"
-                    cmsWidgetName="VehicleConfirmationQuestion"
-                    :vehicles="VehiclesForQuestions"
-                    validationRules="vehicle-required"
-                    v-model="selectedVehicleVin"
-                    :isCarIdDifferent="isCarIdDifferent" />
+                        ref="addressVehiclesQuestion"
+                        cmsWidgetName="VehicleConfirmationQuestion"
+                        :vehicles="VehiclesForQuestions"
+                        validationRules="vehicle-required"
+                        v-model="selectedVehicleVin"
+                        :isCarIdDifferent="isCarIdDifferent" />
 
                     <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
                         <textBlock
-                        :customText="AlertProvideVinBody"
-                        justifyText="left"
-                        class="mb-3"
-                        marginTopSizeOverride="3" />
-
+                            :customText="AlertProvideVinBody"
+                            justifyText="left"
+                            class="mb-3"
+                            marginTopSizeOverride="3" />
                     </div>
 
                     <navbar
-                    cmsWidgetName="FunnelFooterWidget"
-                    ref="navbar"
-                    :isForwardActionDisabled="!meta.valid"
-                    @back-clicked="backButtonAction"
-                    @ForwardClicked="forwardButtonAction" />
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -222,7 +221,7 @@ export default {
             handler() {
                 // does this vehicle match the previously selected carId?
                 this.isCarIdDifferent =
-                this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
+                    this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
                 if (this.isCarIdDifferent) {
                     this.$refs.navbar.updateButtonText(
                         `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`