Merge pull request #1148 from Safelite/feature/CSR-1369

Feature/csr 1369

src/digital-components/text-block/text-block.vue

@@ -46,5 +46,8 @@ export default {
     &.bold {
         font-weight: 500;
     }
+    &.dark {
+        color: $black;
+    }
 }
 </style>

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

@@ -3,7 +3,7 @@
         <div class="d-flex">
             <textBlock
                 :cmsWidgetName="headerCmsWidgetName"
-                typeStyle="body small bold"
+                typeStyle="body small bold dark"
                 margin="mt-0" />
             <textLink linkType="textSmall" text="Edit" class="ml-auto" @click-event="linkClicked" />
         </div>

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

@@ -0,0 +1,72 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
+
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: () => Promise.resolve("content"),
+}));
+
+describe("Damage Review Block", () => {
+    describe("Correctly assembles damage info into a display string", () => {
+        test("Basic Replace", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                propsData: {
+                    damage: {
+                        isRepair: false,
+                    },
+                },
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayContent).toStrictEqual(["Windshield crack"]);
+        });
+
+        test("Basic Repair", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                propsData: {
+                    damage: {
+                        isRepair: true,
+                        numberOfChips: 2,
+                    },
+                },
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayContent).toStrictEqual(["Windshield repair - 2 chips"]);
+        });
+
+        test("Basic Repair - no s with 1 chip", async () => {
+            // Arrange
+            const { wrapper } = setupMocks({
+                propsData: {
+                    damage: {
+                        isRepair: true,
+                        numberOfChips: 1,
+                    },
+                },
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.displayContent).toStrictEqual(["Windshield repair - 1 chip"]);
+        });
+    });
+});
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const wrapper = shallowMount(damageReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

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

@@ -0,0 +1,40 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+
+export default {
+    name: "damage-review",
+    props: {
+        cmsWidgetName: String,
+        damage: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [
+                this.damage.isRepair
+                    ? `Windshield repair - ${this.damage.numberOfChips} chip${
+                          this.damage.numberOfChips !== 1 ? "s" : ""
+                      }`
+                    : "Windshield crack",
+            ];
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/review/review.vue

@@ -41,6 +41,13 @@
                     cmsWidgetName="VehicleReviewWidget"
                     :vehicle="vehicleInfo"
                     @edit-clicked="editVehicle" />
+
+                <hr class="my-0" />
+
+                <damageReview
+                    cmsWidgetName="DamageReviewWidget"
+                    :damage="damageInfo"
+                    @edit-clicked="editDamage" />
             </div>
 
             <hr class="my-0" />
@@ -60,6 +67,7 @@ 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 damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -99,6 +107,12 @@ export default {
                 this.$route
             );
         },
+        editDamage() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_DAMAGE_EDIT,
+                this.$route
+            );
+        },
     },
     computed: {
         subHeaderTitle() {
@@ -113,6 +127,9 @@ export default {
         vehicleInfo() {
             return this.$store.getters.vehicle;
         },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
     },
     components: {
         funnelHeader,
@@ -121,6 +138,7 @@ export default {
         buttonMain,
         textBlock,
         vehicleReview,
+        damageReview,
     },
 };
 </script>

src/router/router-constants/navigation-scenarios.js

@@ -51,6 +51,7 @@ const navigationScenarios = {
 
     // Review
     CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
+    CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",
 };
 
 export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -442,6 +442,10 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_VEHICLE_EDIT,
                     destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_DAMAGE_EDIT,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+                },
             ],
         },
     ];