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 1/6] 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 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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"