From b2ebe33005ff03ec10bca82c3e64cf62506ae917 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 12:29:26 -0400
Subject: [PATCH 1/9] Initial block-out of vehicle-review section.

---
 .../review/review-block/review-block.spec.js  |  3 ++
 .../review/review-block/review-block.vue      | 38 +++++++++++++++++++
 .../vehicle-review/vehicle-review.spec.js     |  3 ++
 .../vehicle-review/vehicle-review.vue         | 28 ++++++++++++++
 src/layouts/review/review.vue                 | 19 ++++++++++
 5 files changed, 91 insertions(+)
 create mode 100644 src/layouts/review/review-block/review-block.spec.js
 create mode 100644 src/layouts/review/review-block/review-block.vue
 create mode 100644 src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
 create mode 100644 src/layouts/review/review-sections/vehicle-review/vehicle-review.vue

diff --git a/src/layouts/review/review-block/review-block.spec.js b/src/layouts/review/review-block/review-block.spec.js
new file mode 100644
index 000000000..2661e2e30
--- /dev/null
+++ b/src/layouts/review/review-block/review-block.spec.js
@@ -0,0 +1,3 @@
+describe("Review Page Content Block", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});
\ No newline at end of file
diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue
new file mode 100644
index 000000000..48a62140f
--- /dev/null
+++ b/src/layouts/review/review-block/review-block.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="py-3">
+        <div class="d-flex">
+            <textBlock :customText="headerText" typeStyle="body small bold" margin="mt-0" />
+            <textLink linkType="textSmall" text="Edit" class="ml-auto" @click-event="linkClicked" />
+        </div>
+        <div class="small" v-for="item in content" :key="item">
+            {{ item }}
+        </div>
+    </div>
+</template>
+
+<script>
+import textBlock from "@/digital-components/text-block/text-block";
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: "vehicle-review",
+    props: {
+        headerText: String,
+        // Specifically an array of strings.
+        content: Array,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        linkClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {},
+    components: {
+        textBlock,
+        textLink,
+    },
+};
+</script>
diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
new file mode 100644
index 000000000..ae2e599c0
--- /dev/null
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
@@ -0,0 +1,3 @@
+describe("Vehicle Review Block", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});
\ No newline at end of file
diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
new file mode 100644
index 000000000..04e96b7e9
--- /dev/null
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
@@ -0,0 +1,28 @@
+<template>
+    <reviewBlock headerText="Vehicle" :content="displayContent" @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+export default {
+    name: "vehicle-review",
+    props: {},
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return ["2018 Ford Fiesta"];
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 68ae16fee..38175f2c2 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -24,8 +24,25 @@
                 isPrimary
                 :buttonText="forwardButtonText"
                 loaderColor="white"
+                class="mb-2"
                 @click-event="forwardButtonAction" />
 
+            <hr />
+
+            <textBlock
+                customText="Appointment Details"
+                typeStyle="label bold"
+                justifyText="justify-text-left"
+                margin="mt-0"
+                class="dark-header" />
+
+            <div class="px-4">
+                <vehicleReview />
+                <hr class="my-0" />
+            </div>
+
+            <hr />
+
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"
                 @back-clicked="backButtonAction"
@@ -40,6 +57,7 @@ import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import buttonMain from "@/ux-components/button-main/button-main";
 import textBlock from "@/digital-components/text-block/text-block";
+import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -91,6 +109,7 @@ export default {
         vehicleBanner,
         buttonMain,
         textBlock,
+        vehicleReview,
     },
 };
 </script>

From 270c75743c42eb78382057dd3ffd560be14d5dc4 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 13:13:20 -0400
Subject: [PATCH 2/9] Slight change before hookup to cms

---
 .../review/review-sections/vehicle-review/vehicle-review.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
index 04e96b7e9..09306d271 100644
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
@@ -1,5 +1,5 @@
 <template>
-    <reviewBlock headerText="Vehicle" :content="displayContent" @edit-clicked="editClicked" />
+    <reviewBlock :headerText="headerText" :content="displayContent" @edit-clicked="editClicked" />
 </template>
 
 <script>
@@ -17,6 +17,9 @@ export default {
         },
     },
     computed: {
+        headerText () {
+            return "Vehicle";
+        },
         displayContent() {
             return ["2018 Ford Fiesta"];
         },

From 280994f9d82eef1b9ecf1042c9afc7f22fdd9927 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 13:46:36 -0400
Subject: [PATCH 3/9] Drive review label from CMS widget.

---
 src/layouts/review/review-block/review-block.vue     |  7 +++++--
 .../vehicle-review/vehicle-review.vue                | 12 +++++++-----
 src/layouts/review/review.vue                        |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue
index 48a62140f..2209d197c 100644
--- a/src/layouts/review/review-block/review-block.vue
+++ b/src/layouts/review/review-block/review-block.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="py-3">
         <div class="d-flex">
-            <textBlock :customText="headerText" typeStyle="body small bold" margin="mt-0" />
+            <textBlock
+                :cmsWidgetName="headerCmsWidgetName"
+                typeStyle="body small bold"
+                margin="mt-0" />
             <textLink linkType="textSmall" text="Edit" class="ml-auto" @click-event="linkClicked" />
         </div>
         <div class="small" v-for="item in content" :key="item">
@@ -17,7 +20,7 @@ import textLink from "@/ux-components/text-link/text-link";
 export default {
     name: "vehicle-review",
     props: {
-        headerText: String,
+        headerCmsWidgetName: String,
         // Specifically an array of strings.
         content: Array,
     },
diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
index 09306d271..a0533c4ac 100644
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
@@ -1,5 +1,8 @@
 <template>
-    <reviewBlock :headerText="headerText" :content="displayContent" @edit-clicked="editClicked" />
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
 </template>
 
 <script>
@@ -7,7 +10,9 @@ import reviewBlock from "@/layouts/review/review-block/review-block";
 
 export default {
     name: "vehicle-review",
-    props: {},
+    props: {
+        cmsWidgetName: String,
+    },
     data() {
         return {};
     },
@@ -17,9 +22,6 @@ export default {
         },
     },
     computed: {
-        headerText () {
-            return "Vehicle";
-        },
         displayContent() {
             return ["2018 Ford Fiesta"];
         },
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 38175f2c2..cbd7b05ac 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -37,7 +37,7 @@
                 class="dark-header" />
 
             <div class="px-4">
-                <vehicleReview />
+                <vehicleReview cmsWidgetName="VehicleReviewWidget" />
                 <hr class="my-0" />
             </div>
 

From ac2550b1c0b42af21dce371f3bb8e5a1c2ea9252 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 13:46:45 -0400
Subject: [PATCH 4/9] Formatting

---
 src/layouts/review/review-block/review-block.spec.js            | 2 +-
 .../review-sections/vehicle-review/vehicle-review.spec.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/review/review-block/review-block.spec.js b/src/layouts/review/review-block/review-block.spec.js
index 2661e2e30..84e35cb9c 100644
--- a/src/layouts/review/review-block/review-block.spec.js
+++ b/src/layouts/review/review-block/review-block.spec.js
@@ -1,3 +1,3 @@
 describe("Review Page Content Block", () => {
     test.todo("Add more tests as specific functionality is added.");
-});
\ No newline at end of file
+});
diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
index ae2e599c0..fa387ba02 100644
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
@@ -1,3 +1,3 @@
 describe("Vehicle Review Block", () => {
     test.todo("Add more tests as specific functionality is added.");
-});
\ No newline at end of file
+});

From a919af0dab8fce20f868fc48b959fa3316e59840 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 13:56:00 -0400
Subject: [PATCH 5/9] Drive vehicle info with store

---
 .../review/review-sections/vehicle-review/vehicle-review.vue | 3 ++-
 src/layouts/review/review.vue                                | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
index a0533c4ac..76248a1c2 100644
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.vue
@@ -12,6 +12,7 @@ export default {
     name: "vehicle-review",
     props: {
         cmsWidgetName: String,
+        vehicle: Object,
     },
     data() {
         return {};
@@ -23,7 +24,7 @@ export default {
     },
     computed: {
         displayContent() {
-            return ["2018 Ford Fiesta"];
+            return [`${this.vehicle.year} ${this.vehicle.make} ${this.vehicle.model}`];
         },
     },
     components: {
diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index cbd7b05ac..82e4a391d 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -37,7 +37,7 @@
                 class="dark-header" />
 
             <div class="px-4">
-                <vehicleReview cmsWidgetName="VehicleReviewWidget" />
+                <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
                 <hr class="my-0" />
             </div>
 
@@ -102,6 +102,9 @@ export default {
         forwardButtonText() {
             return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
         },
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
     },
     components: {
         funnelHeader,

From bd140cd3b60d64bc6d410b1534e198ff95db74fe Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 14:14:55 -0400
Subject: [PATCH 6/9] Add navigation when edit is clicked

---
 src/layouts/review/review.vue                       | 11 ++++++++++-
 src/router/router-constants/fmgPage-values.js       |  1 +
 src/router/router-constants/navigation-scenarios.js |  3 +++
 src/router/router-constants/routing-table.js        |  9 +++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 82e4a391d..4c6c791c0 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -37,7 +37,10 @@
                 class="dark-header" />
 
             <div class="px-4">
-                <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
+                <vehicleReview
+                    cmsWidgetName="VehicleReviewWidget"
+                    :vehicle="vehicleInfo"
+                    @edit-clicked="navigateToVehicleYear" />
                 <hr class="my-0" />
             </div>
 
@@ -91,6 +94,12 @@ export default {
         },
         backButtonAction() {},
         forwardButtonAction() {},
+        navigateToVehicleYear() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.REVIEW_VEHICLE_EDIT,
+                this.$route
+            );
+        },
     },
     computed: {
         subHeaderTitle() {
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index 283c68ef1..b33d1f23c 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -17,6 +17,7 @@ const fmgPageValues = {
     SERVICE_LOCATION: "service-location",
     HERITAGE: "heritage",
     SCHEDULE: "schedule",
+    REVIEW: "review",
 };
 
 export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 88b5c92a8..012d327d7 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -48,6 +48,9 @@ const navigationScenarios = {
 
     // Scheduling
     SELECTED_LOCATION: "SELECTED_LOCATION",
+
+    // Review
+    REVIEW_VEHICLE_EDIT: "REVIEW_VEHICLE_EDIT",
 };
 
 export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 32c6e4ba5..4c6232bfc 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -435,6 +435,15 @@ const routingTable = function (store) {
                 },
             ],
         },
+        {
+            fmgPageValue: fmgPageValues.REVIEW,
+            maps: [
+                {
+                    scenario: navigationScenarios.REVIEW_VEHICLE_EDIT,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+                },
+            ],
+        },
     ];
 };
 

From 3164dcefd54d00178ede9efe6263ea628bebc1d5 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 14:52:48 -0400
Subject: [PATCH 7/9] Updating horizontal rules.

---
 src/layouts/review/review.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue
index 4c6c791c0..2a152f8fd 100644
--- a/src/layouts/review/review.vue
+++ b/src/layouts/review/review.vue
@@ -41,10 +41,9 @@
                     cmsWidgetName="VehicleReviewWidget"
                     :vehicle="vehicleInfo"
                     @edit-clicked="navigateToVehicleYear" />
-                <hr class="my-0" />
             </div>
 
-            <hr />
+            <hr class="my-0" />
 
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"

From a2848214448071754db965251eb76687289af8db Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 15:49:35 -0400
Subject: [PATCH 8/9] Add test for vehicle-review

---
 .../vehicle-review/vehicle-review.spec.js     | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
index fa387ba02..e5baa2225 100644
--- a/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
+++ b/src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js
@@ -1,3 +1,37 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
 describe("Vehicle Review Block", () => {
-    test.todo("Add more tests as specific functionality is added.");
+    test("Correctly assembles vehicle info into a display string", async () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            propsData: {
+                vehicle: {
+                    year: "2019",
+                    make: "Honda",
+                    model: "Odyssey",
+                },
+            },
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toStrictEqual(["2019 Honda Odyssey"]);
+    });
 });
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const wrapper = shallowMount(vehicleReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

From 949849f0354954e46044de706cbb6ee0b557e0fc Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 1 Jun 2023 16:43:00 -0400
Subject: [PATCH 9/9] Add test for review content block

---
 .../review/review-block/review-block.spec.js  | 37 ++++++++++++++++++-
 .../review/review-block/review-block.vue      |  2 +-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/layouts/review/review-block/review-block.spec.js b/src/layouts/review/review-block/review-block.spec.js
index 84e35cb9c..1a25e8bfd 100644
--- a/src/layouts/review/review-block/review-block.spec.js
+++ b/src/layouts/review/review-block/review-block.spec.js
@@ -1,3 +1,36 @@
-describe("Review Page Content Block", () => {
-    test.todo("Add more tests as specific functionality is added.");
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
+describe("Review Content Block", () => {
+    test("Displays one new line of content for each element in the content prop.", () => {
+        // Arrange
+        const { wrapper } = setupMocks({
+            propsData: {
+                headerCmsWidgetName: "TestWidget",
+                content: ["a", "b", "c", "d"],
+            },
+        });
+
+        // Act
+        const contentLines = wrapper.findAll("[data-test='contentLine']");
+
+        // Assert
+        expect(contentLines.length).toBe(4);
+    });
 });
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    mountOptions["attachTo"] = document.body;
+
+    const wrapper = shallowMount(reviewBlock, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
diff --git a/src/layouts/review/review-block/review-block.vue b/src/layouts/review/review-block/review-block.vue
index 2209d197c..128e488d7 100644
--- a/src/layouts/review/review-block/review-block.vue
+++ b/src/layouts/review/review-block/review-block.vue
@@ -7,7 +7,7 @@
                 margin="mt-0" />
             <textLink linkType="textSmall" text="Edit" class="ml-auto" @click-event="linkClicked" />
         </div>
-        <div class="small" v-for="item in content" :key="item">
+        <div class="small" v-for="item in content" :key="item" data-test="contentLine">
             {{ item }}
         </div>
     </div>