Merge pull request #1270 from Safelite/feature/CSR-1371

Feature/csr 1371

src/layouts/review/review-sections/service-location-review/service-location-review.spec.js

@@ -0,0 +1,129 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
+
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+const cmsContent = {
+    ServiceLocationTitleWidget: {
+        Text: "Title Text",
+    },
+};
+
+describe("Service Location Review Block", () => {
+    it("Should render mobile address if mobile appointment", async () => {
+        // Arrange
+        const props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([
+            "Mobile Address 1, Mobile Address 2, Mobile City, MO 11111",
+        ]);
+    });
+
+    it("Should render service location address if inshop appointment.", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        props.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([
+            "Service Location Address, Service Location City, SL 22222",
+        ]);
+    });
+
+    it("Should render service location address if drop-off appointment", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        props.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([
+            "Service Location Address, Service Location City, SL 22222",
+        ]);
+    });
+
+    it("Should not add comma or any text if address2 is null", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        props.serviceLocation.address2 = null;
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual(["Mobile Address 1, Mobile City, MO 11111"]);
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        cmsWidgetName: "ServiceLocationTitleWidget",
+        serviceLocation: {
+            address: "Mobile Address 1",
+            address2: "Mobile Address 2",
+            city: "Mobile City",
+            state: "MO",
+            zipCode: "11111",
+            zipCodeCtu: "",
+            appointmentType: AppointmentTypeStrings.MOBILE,
+            isVehicleProtected: false,
+            provider: {
+                providerNumber: "",
+                address: {
+                    streetAddress: "Service Location Address",
+                    city: "Service Location City",
+                    state: "SL",
+                    zipCode: "22222",
+                    zipCodeCtu: "",
+                },
+            },
+        },
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(serviceLocationReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}

src/layouts/review/review-sections/service-location-review/service-location-review.vue

@@ -0,0 +1,58 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+export default {
+    name: "service-package-review",
+    props: {
+        cmsWidgetName: String,
+        serviceLocation: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            return [
+                `${this.addressInfo.address}${this.addressInfo.address2 ? ", " : ""}${
+                    this.addressInfo.address2
+                }, ${this.addressInfo.city}, ${this.addressInfo.state} ${this.addressInfo.zipCode}`,
+            ];
+        },
+        addressInfo() {
+            if (this.serviceLocation?.appointmentType === AppointmentTypeStrings.MOBILE) {
+                return {
+                    address: this.serviceLocation?.address,
+                    address2: this.serviceLocation?.address2 ?? "",
+                    city: this.serviceLocation?.city,
+                    state: this.serviceLocation?.state,
+                    zipCode: this.serviceLocation?.zipCode,
+                };
+            } else {
+                return {
+                    address: this.serviceLocation?.provider?.address?.streetAddress,
+                    address2: "",
+                    city: this.serviceLocation?.provider?.address?.city,
+                    state: this.serviceLocation?.provider?.address?.state,
+                    zipCode: this.serviceLocation?.provider?.address?.zipCode,
+                };
+            }
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/review/review.vue

@@ -62,6 +62,13 @@
                     :damage="damageInfo"
                     :lineItems="lineItems"
                     @edit-clicked="editServicePackage" />
+
+                <hr class="my-0" />
+
+                <serviceLocationReview
+                    cmsWidgetName="ServiceLocationTitleWidget"
+                    :serviceLocation="serviceLocationInfo"
+                    @edit-clicked="editServiceLocation" />
             </div>
 
             <div>
@@ -86,6 +93,7 @@ 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 servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
+import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -152,6 +160,12 @@ export default {
                 this.$route
             );
         },
+        editServiceLocation() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
+                this.$route
+            );
+        },
     },
     computed: {
         subHeaderTitle() {
@@ -172,6 +186,9 @@ export default {
         lineItems() {
             return this.$store.getters.lineItems;
         },
+        serviceLocationInfo() {
+            return this.$store.getters.order.serviceLocation;
+        },
     },
     components: {
         funnelHeader,
@@ -182,6 +199,7 @@ export default {
         vehicleReview,
         damageReview,
         servicePackageReview,
+        serviceLocationReview,
     },
 };
 </script>

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

@@ -50,6 +50,7 @@ const navigationScenarios = {
     CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
     CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",
     CLICKED_SERVICE_PACKAGE_EDIT: "CLICKED_SERVICE_PACKAGE_EDIT",
+    CLICKED_SERVICE_LOCATION_EDIT: "CLICKED_SERVICE_LOCATION_EDIT",
 };
 
 export { navigationScenarios };

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

@@ -480,6 +480,10 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_BACK,
                     destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
+                },
             ],
         },
     ];