Merge remote-tracking branch 'origin/release/submit-cash' into CSR-1357-customer-details

src/digital-components/button-question/button-question.vue

@@ -72,7 +72,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 </div>
             </fieldset>
         </div>
-        <div class="row form-test-error mt-1">
+        <div class="row form-test-error">
             <error-message
                 class="small"
                 :name="formatString(groupName)"
@@ -189,7 +189,7 @@ export default {
                     classes = "d-flex flex-row p-0";
                     break;
                 case "listCard":
-                    classes = "row g-2 justify-content-center";
+                    classes = "row g-2 justify-content-center mb-1";
                     if (this.isWide) {
                         classes += " flex-column";
                     }

src/digital-components/date-picker/date-picker.vue

@@ -846,7 +846,7 @@ export default {
         font-weight: 500;
         text-underline-offset: 4px;
         position: absolute;
-        top: 90%;
+        bottom: 0;
     }
 
     .past {
@@ -909,7 +909,7 @@ export default {
 .btn-link {
     display: block;
     position: relative;
-    height: 3rem;
+    height: 2rem;
     width: 100%;
     justify-content: center;
     background: transparent;

src/digital-components/modal/modal.vue

@@ -163,8 +163,7 @@ export default {
         }
         .modal-footer {
             border-top: none;
-            background-color: $gray-100;
+
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
             button {
                 margin: 0;
             }

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

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

src/fmg-components/funnel-footer/funnel-footer.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
+    <div class="row"></div>
-    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
+    <footer class="footer 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">
                 <buttonMain
@@ -46,19 +46,10 @@ export default {
     },
     data() {
         return {
-            paddingHeight: 0,
             customButtontext: "",
         };
     },
-    mounted() {
+
-        this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
-        this.$nextTick(() => {
-            window.addEventListener("resize", this.onResize);
-        });
-    },
-    beforeUnmount() {
-        window.removeEventListener("resize", this.onResize);
-    },
     unmounted() {
         document.onkeydown = null;
     },
@@ -73,9 +64,6 @@ export default {
         },
     },
     methods: {
-        onResize() {
-            this.paddingHeight = this.getFooterInfoBoxHeight();
-        },
         updateButtonText(newText) {
             this.customButtontext = newText;
         },
@@ -101,6 +89,7 @@ export default {
 
 <style lang="scss" scoped>
 .footer {
+    overflow: visible;
     display: flex;
     a {
         display: flex;

src/layouts/address-lookup/address-lookup.vue

@@ -53,7 +53,7 @@
                     v-bind:isDismissible="false" />
                 <transition name="fade" mode="out-in">
                     <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
-                        <div class="row mb-4">
+                        <div class="row mt-4 mb-1">
                             <div class="col">
                                 <textboxQuestion
                                     cmsWidgetName="ServiceZipQuestionWidget"

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -30,7 +30,7 @@
                 validationRules="email-address-required|email-address-format" />
         </div>
     </div>
-    <div class="row mb-4">
+    <div class="row mb-0">
         <div class="col">
             <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
         </div>

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -54,10 +54,9 @@
                     :manualCopy="AlertNonServiceableZipBody"
                     alertClass="alert-danger"
                     v-bind:isDismissible="false" />
-                <div class="row my-2">
+                <div class="row mt-2" v-if="showServiceZipField">
-                    <div class="col">
+                    <div class="col mb-1">
                         <textboxQuestion
-                            v-if="showServiceZipField"
                             cmsWidgetName="ServiceZipQuestionWidget"
                             v-model="serviceZipCode"
                             inputId="serviceZipCode"

src/layouts/quote/quote.vue

@@ -239,3 +239,8 @@ export default {
     },
 };
 </script>
+<style scoped>
+.text-block {
+    display: block;
+}
+</style>

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 dark"
+                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/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-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.spec.js

@@ -0,0 +1,3 @@
+describe("Review Page", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});

src/layouts/review/review.vue

@@ -0,0 +1,151 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <!-- When customer-details is added: v-slot="{ meta }" -->
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="false" />
+
+            <textBlock
+                :customText="subHeaderTitle"
+                typeStyle="h5"
+                justifyText="justify-content-center"
+                margin="mt-1"
+                class="dark-header" />
+            <textBlock
+                :customText="subHeaderBody"
+                typeStyle="body"
+                justifyText="justify-content-left"
+                margin="mt-0 mb-2" />
+
+            <buttonMain
+                ref="buttonMain"
+                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="editVehicle" />
+
+                <hr class="my-0" />
+
+                <damageReview
+                    cmsWidgetName="DamageReviewWidget"
+                    :damage="damageInfo"
+                    @edit-clicked="editDamage" />
+            </div>
+
+            <hr class="my-0" />
+
+            <funnelFooter
+                cmsWidgetName="FunnelFooterWidget"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+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 damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "review",
+    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);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {},
+        forwardButtonAction() {},
+        editVehicle() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_VEHICLE_EDIT,
+                this.$route
+            );
+        },
+        editDamage() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_DAMAGE_EDIT,
+                this.$route
+            );
+        },
+    },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
+        },
+        subHeaderBody() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
+        },
+        forwardButtonText() {
+            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
+        },
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        buttonMain,
+        textBlock,
+        vehicleReview,
+        damageReview,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+    line-height: 1.6;
+}
+</style>

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -3,7 +3,7 @@
         <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
     </div>
     <div class="nested-radio">
-        <div class="row my-2">
+        <div class="row mt-2">
             <div class="col">
                 <buttonQuestion
                     v-model="selectedTint"
@@ -14,7 +14,7 @@
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
                     :validationRules="tintValidationRules">
-                    <div class="row my-2" aria-live="polite">
+                    <div class="row mt-2" aria-live="polite">
                         <div class="col">
                             <buttonQuestion
                                 v-model="selectedPartNumber"

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -11,7 +11,7 @@
             <div class="fade-on-route-transition sub-container make-tall">
                 <div class="prevent-squish my-5">
                     <div class="row">
-                        <div class="col">
+                        <div class="col pb-0">
                             <alert
                                 class="rounded border-0 shadow-sm"
                                 alertClass="alert-warning"

src/layouts/vin-lookup/vin-lookup.vue

@@ -62,7 +62,7 @@
                             validationRules="email-address-required|email-address-format" />
                     </div>
                 </div>
-                <div class="row mb-2">
+                <div class="row mb-0">
                     <div class="col">
                         <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
                     </div>

src/router/index.js

@@ -28,7 +28,13 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
+import review from "@/layouts/review/review";
 const routes = [
+    {
+        path: "/review", // This is a temporary route for testing.
+        name: "review",
+        component: review,
+    },
     {
         path: "/",
         name: "root",

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,10 @@ const navigationScenarios = {
 
     // Scheduling
     SELECTED_LOCATION: "SELECTED_LOCATION",
+
+    // Review
+    CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
+    CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",
 };
 
 export { navigationScenarios };

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

@@ -435,6 +435,19 @@ const routingTable = function (store) {
                 },
             ],
         },
+        {
+            fmgPageValue: fmgPageValues.REVIEW,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_VEHICLE_EDIT,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_DAMAGE_EDIT,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+                },
+            ],
+        },
     ];
 };