Merge pull request #1140 from Safelite/feature/CSR-1368

Feature/csr 1368

src/layouts/review/review-block/review-block.spec.js

@@ -0,0 +1,36 @@
+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 };
+}

src/layouts/review/review-block/review-block.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="py-3">
+        <div class="d-flex">
+            <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" data-test="contentLine">
+            {{ 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: {
+        headerCmsWidgetName: String,
+        // Specifically an array of strings.
+        content: Array,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        linkClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {},
+    components: {
+        textBlock,
+        textLink,
+    },
+};
+</script>

src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js

@@ -0,0 +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("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 };
+}

src/layouts/review/review-sections/vehicle-review/vehicle-review.vue

@@ -0,0 +1,34 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+export default {
+    name: "vehicle-review",
+    props: {
+        cmsWidgetName: String,
+        vehicle: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [`${this.vehicle.year} ${this.vehicle.make} ${this.vehicle.model}`];
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/review/review.vue

@@ -24,8 +24,27 @@
                 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
+                    cmsWidgetName="VehicleReviewWidget"
+                    :vehicle="vehicleInfo"
+                    @edit-clicked="navigateToVehicleYear" />
+            </div>
+
+            <hr class="my-0" />
+
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"
                 @back-clicked="backButtonAction"
@@ -40,6 +59,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";
@@ -73,6 +93,12 @@ export default {
         },
         backButtonAction() {},
         forwardButtonAction() {},
+        navigateToVehicleYear() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.REVIEW_VEHICLE_EDIT,
+                this.$route
+            );
+        },
     },
     computed: {
         subHeaderTitle() {
@@ -84,6 +110,9 @@ export default {
         forwardButtonText() {
             return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
         },
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
     },
     components: {
         funnelHeader,
@@ -91,6 +120,7 @@ export default {
         vehicleBanner,
         buttonMain,
         textBlock,
+        vehicleReview,
     },
 };
 </script>

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 };

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 };

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,
+                },
+            ],
+        },
     ];
 };