Merge pull request #1664 from Safelite/feature/csr-1900

Feature/csr 1900

src/layouts/payment-method/payment-method.vue

@@ -21,6 +21,10 @@
 
                     <hr class="my-0" />
 
+                    <reviewDropdown ref="reviewDropdown" />
+
+                    <hr class="my-0" />
+
                     <cart
                         :damage="damageInfo"
                         :availableVaps="availableVaps"
@@ -79,6 +83,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import cart from "@/fmg-components/cart/cart";
+import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
 import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
 import addVapsModalButtons from "./add-vaps-modal-buttons/add-vaps-modal-buttons";
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
@@ -152,6 +157,8 @@ export default {
             "payment-method"
         );
 
+        const reviewDropdownPromise = reviewDropdown.methods.loadInitialData();
+
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
@@ -165,6 +172,10 @@ export default {
                 resultKey: "rainDefense",
                 promise: rainDefensePromise,
             },
+            {
+                resultKey: "reviewDropdownData",
+                promise: reviewDropdownPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -269,6 +280,8 @@ export default {
             );
             vm.updateFooterButtonText(vm.customCtaCopy);
 
+            vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
+
             if (revalidatePromoResponse) {
                 const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
                     revalidatePromoResponse,
@@ -594,6 +607,7 @@ export default {
         addVapsModalButtons,
         paymentMethodQuestion,
         promoModalQuestion,
+        reviewDropdown,
     },
 };
 </script>

src/layouts/payment-method/review-dropdown/review-block/review-block.spec.js

@@ -1,7 +1,7 @@
 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";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 
 jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: () => Promise.resolve("content"),

src/layouts/payment-method/review-dropdown/review-block/review-block.vue

@@ -6,17 +6,6 @@
                 :customText="customHeaderText"
                 typeStyle="body small bold dark"
                 marginTopSizeOverride="0" />
-            <textLink
-                linkType="textSmall"
-                text="Edit"
-                class="ml-auto"
-                useLoadingModal
-                @click-event="linkClicked"
-                href="javascript:void(0)">
-                <template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
-                    <span class="sr-only"> {{ screenReaderOnlyText }} </span>
-                </template>
-            </textLink>
         </div>
         <div
             class="small review-block-content"
@@ -38,24 +27,13 @@ export default {
         customHeaderText: String,
         // Specifically an array of strings.
         content: Array,
-        editScreenReaderTextCmsWidgetName: String,
     },
     data() {
         return {};
     },
-    computed: {
+    methods: {},
-        screenReaderOnlyText() {
-            return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, "Text");
-        },
-    },
-    methods: {
-        linkClicked() {
-            this.$emit("edit-clicked");
-        },
-    },
     components: {
         textBlock,
-        textLink,
     },
 };
 </script>

src/layouts/payment-method/review-dropdown/review-dropdown.vue

@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <div
+            class="row review-toggle flex align-items-center pt-4"
+            :class="[isExpanded ? 'expanded' : '']"
+            @click="toggleIsExpanded">
+            <a
+                aria-label="expand appointment details"
+                href="javascript:void(0)"
+                class="col d-flex justify-content-between py-0">
+                <span class="label">Appointment details</span>
+            </a>
+        </div>
+        <div class="review-table px-4">
+            <vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
+
+            <hr class="my-0" />
+
+            <damageReview
+                cmsWidgetName="DamageReviewWidget"
+                damageLocationsWidgetName="DamageLocationsWidget"
+                :damage="damageInfo" />
+
+            <hr class="my-0" />
+
+            <servicePackageReview
+                ref="servicePackageReview"
+                servicePackageOptionsCmsName="ServicePackageTitle"
+                defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
+                vapsItemsCmsName="VapsItemDescriptions"
+                :damage="damageInfo"
+                :lineItems="lineItems" />
+
+            <hr class="my-0" />
+
+            <serviceLocationReview
+                cmsWidgetName="ServiceLocationTitleWidget"
+                :serviceLocation="serviceLocationInfo" />
+
+            <hr class="my-0" />
+
+            <scheduleReview cmsWidgetName="ScheduleWidget" :appointmentType="appointmentType" />
+
+            <hr class="my-0" />
+
+            <customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
+        </div>
+    </div>
+</template>
+
+<script>
+import textBlock from "@/digital-components/text-block/text-block";
+
+import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
+import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
+import scheduleReview from "@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review";
+import serviceLocationReview from "@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review";
+import servicePackageReview from "@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review";
+import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
+
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "review-dropdown",
+    props: {},
+    data() {
+        return {
+            isExpanded: false,
+        };
+    },
+    methods: {
+        async loadInitialData() {
+            const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
+
+            const promiseResultMap = [
+                {
+                    resultKey: "servicePackageData",
+                    promise: servicePackageInitialDataPromise,
+                },
+            ];
+
+            return settleAllPromises(promiseResultMap);
+        },
+        initializeComponent(apiResponses) {
+            this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
+        },
+        toggleIsExpanded() {
+            this.isExpanded = !this.isExpanded;
+        },
+    },
+    computed: {
+        vehicleInfo() {
+            return this.$store.getters.vehicle;
+        },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
+        lineItems() {
+            return this.$store.getters.lineItems;
+        },
+        serviceLocationInfo() {
+            return this.$store.getters.order.serviceLocation;
+        },
+        appointmentType() {
+            return this.$store.getters.order.serviceLocation.appointmentType;
+        },
+        customerInfo() {
+            return this.$store.getters.order.customer;
+        },
+    },
+    components: {
+        customerReview,
+        damageReview,
+        scheduleReview,
+        serviceLocationReview,
+        servicePackageReview,
+        vehicleReview,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+    line-height: 1.6;
+}
+
+.review-table {
+    max-height: 0;
+    transition: all 350ms ease-in;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.review-toggle {
+    margin-bottom: 1rem;
+
+    &.expanded {
+        margin-bottom: 0;
+    }
+
+    &:after {
+        content: "";
+        transition: all 0.5s ease;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right center;
+        width: 16px;
+        height: 9px;
+        display: inline-flex;
+        position: relative;
+        right: 0.75rem;
+        margin: 0.5rem 0 0.5rem 1rem;
+        cursor: pointer;
+    }
+    &.expanded:after {
+        transform: rotate(180deg);
+    }
+    &.expanded + .review-table {
+        max-height: 800px;
+        transition: all 150ms ease-in;
+        overflow: hidden;
+        visibility: visible;
+    }
+    a {
+        text-decoration: none;
+    }
+    .label {
+        color: $black;
+        font-weight: 500;
+        line-height: 1.625;
+    }
+}
+</style>

src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 
-import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
+import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
 
 const testConstants = {
     cms: {

src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue

@@ -1,13 +1,9 @@
 <template>
-    <reviewBlock
+    <reviewBlock :customHeaderText="header" :content="displayContent" @edit-clicked="editClicked" />
-        editScreenReaderTextCmsWidgetName="EditContactDetailsScreenReader"
-        :customHeaderText="header"
-        :content="displayContent"
-        @edit-clicked="editClicked" />
 </template>
 
 <script>
-import reviewBlock from "@/layouts/review/review-block/review-block";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 
 export default {
     name: "customer-review",

src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js

@@ -1,7 +1,7 @@
 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";
+import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
 import { damageLocationsSelected as glassConstants } from "@/constants/damage-locations-selected";
 
 const testConstants = {

src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue

@@ -1,13 +1,12 @@
 <template>
     <reviewBlock
-        editScreenReaderTextCmsWidgetName="EditDamageScreenReader"
         :headerCmsWidgetName="cmsWidgetName"
         :content="displayContent"
         @edit-clicked="editClicked" />
 </template>
 
 <script>
-import reviewBlock from "@/layouts/review/review-block/review-block";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 export default {

src/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review.vue

@@ -1,13 +1,12 @@
 <template>
     <reviewBlock
-        editScreenReaderTextCmsWidgetName="EditAppointmentScreenReader"
         :customHeaderText="headerText"
         :content="displayContent"
         @edit-clicked="editClicked" />
 </template>
 
 <script>
-import reviewBlock from "@/layouts/review/review-block/review-block";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 
 export default {
     name: "schedule-review",

src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.spec.js

@@ -1,6 +1,6 @@
 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 serviceLocationReview from "@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review";
 
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 

src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue

@@ -1,13 +1,12 @@
 <template>
     <reviewBlock
-        editScreenReaderTextCmsWidgetName="EditLocationScreenReader"
         :headerCmsWidgetName="cmsWidgetName"
         :content="displayContent"
         @edit-clicked="editClicked" />
 </template>
 
 <script>
-import reviewBlock from "@/layouts/review/review-block/review-block";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
 export default {

src/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
+import servicePackageReview from "@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review";
 
 import { packageNames } from "@/constants/package-names";
 import { partTypeStrings } from "@/constants/part-type-strings";

src/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review.vue

@@ -1,13 +1,12 @@
 <template>
     <reviewBlock
-        editScreenReaderTextCmsWidgetName="EditServiceTypeScreenReader"
         :headerCmsWidgetName="packageNameWidget"
         :content="displayContent"
         @edit-clicked="editClicked" />
 </template>
 
 <script>
-import reviewBlock from "@/layouts/review/review-block/review-block";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 import {
     getHighestFullySatisfiedTier,
     containsLineItemWithPartType,

src/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review.spec.js

@@ -1,7 +1,7 @@
 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";
+import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
 
 jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: () => Promise.resolve("content"),

src/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review.vue

@@ -1,13 +1,12 @@
 <template>
     <reviewBlock
-        editScreenReaderTextCmsWidgetName="EditVehicleScreenReader"
         :headerCmsWidgetName="cmsWidgetName"
         :content="displayContent"
         @edit-clicked="editClicked" />
 </template>
 
 <script>
-import reviewBlock from "@/layouts/review/review-block/review-block";
+import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
 
 export default {
     name: "vehicle-review",

src/layouts/review/review.spec.js

@@ -1,362 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import store from "@/store";
-
-import review from "@/layouts/review/review";
-
-const testConstants = {};
-
-jest.mock("@/store", () => ({
-    commit: jest.fn(),
-    dispatch: jest.fn(),
-}));
-
-describe("Review Page", () => {
-    beforeEach(() => {
-        store.getters = {
-            order: {
-                vehicle: {
-                    year: "2020",
-                    make: "Acura",
-                    model: "MDX",
-                    style: "4 door sedan",
-                },
-                damage: {
-                    isRepair: false,
-                    numberOfChips: 2,
-                    glassToReplace: ["dummy location value"],
-                },
-                lineItems: {
-                    glassParts: ["dummy part value"],
-                    supportingItems: ["dummy supporting item"],
-                    vaps: ["dummy vap"],
-                },
-                serviceLocation: {
-                    address: "address 1",
-                    address2: "address 2",
-                    city: "city",
-                    state: "state",
-                    zipCode: "zip code",
-                    appointmentType: "Mobile",
-                    provider: {
-                        providerNumber: 1,
-                        address: {
-                            streetAddress: "provider address 1",
-                            city: "provider city",
-                            state: "provider state",
-                            zipCode: "provider zip code",
-                        },
-                    },
-                },
-                schedule: {
-                    date: "date",
-                    startTime: "start",
-                    endTime: "end",
-                    jobMinMinutes: "30",
-                    jobMaxMinutes: "45",
-                },
-                customer: {
-                    firstName: "first name",
-                    lastName: "last name",
-                    emailAddress: "builddigitaltest@safelite.com",
-                    phoneNumber: "555-555-5555",
-                    isSmsOptIn: true,
-                },
-            },
-        };
-    });
-    describe("arePagePrerequisitesValid", () => {
-        test("Returns true for baseline valid state", () => {
-            // Arrange
-            const { wrapper } = setupMocks({});
-
-            // Act
-            const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-            // Assert
-            expect(isValid).toBe(true);
-        });
-        test("Returns false for empty state", () => {
-            // Arrange
-            store.getters.order = {
-                vehicle: {
-                    year: null,
-                    make: null,
-                    model: null,
-                    style: null,
-                    carId: null,
-                    category: null,
-                    vin: null,
-                    imageUrl: null,
-                    imageVifNumber: null,
-                    imageColor: null,
-                    registration: {
-                        licensePlate: null,
-                    },
-                },
-                serviceLocation: {
-                    address: null,
-                    address2: null,
-                    city: null,
-                    state: null,
-                    zipCode: null,
-                    zipCodeCtu: null,
-                    appointmentType: null,
-                    isVehicleProtected: null,
-                    provider: {
-                        providerNumber: null,
-                        address: {
-                            streetAddress: null,
-                            city: null,
-                            state: null,
-                            zipCode: null,
-                            zipCodeCtu: null,
-                        },
-                    },
-                    techNotes: null,
-                },
-                customer: {
-                    firstName: null,
-                    lastName: null,
-                    emailAddress: null,
-                    phoneNumber: null,
-                    isSmsOptIn: null,
-                },
-                damage: {
-                    isRepair: null,
-                    numberOfChips: null,
-                    glassToReplace: null,
-                    partQuestionAnswers: null,
-                    moldingQuestionAnswers: null,
-                    capabilityQuestionAnswers: null,
-                },
-                lineItems: {
-                    glassParts: null,
-                    supportingItems: null,
-                    vaps: null,
-                    serverData: null,
-                },
-                payment: {
-                    isInsurance: null,
-                    insuranceCoverage: {
-                        isVerified: null,
-                        coverageStatus: null,
-                    },
-                    parentAccountNumber: 0,
-                },
-                schedule: {
-                    date: null,
-                    startTime: null,
-                    endTime: null,
-                    routeCode: null,
-                    jobMaxMinutes: null,
-                    jobMinMinutes: null,
-                },
-                referralNumber: null,
-                referralSequenceNumber: null,
-                referralDate: null,
-                referralCorrelationId: null,
-                eon: null,
-            };
-
-            const { wrapper } = setupMocks({});
-
-            // Act
-            const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-            // Assert
-            expect(isValid).toBe(false);
-        });
-        describe("Damage requirements", () => {
-            test("Accepts null glassToReplace when is repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = true;
-                store.getters.order.damage.glassToReplace = null;
-                store.getters.order.damage.numberOfChips = 1;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(true);
-            });
-            test("Rejects 0 chips when repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = true;
-                store.getters.order.damage.numberOfChips = 0;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-            test("Rejects null chips when repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = true;
-                store.getters.order.damage.numberOfChips = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-            test("Accepts null chips when not repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = false;
-                store.getters.order.damage.numberOfChips = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(true);
-            });
-            test("Rejects empty glassToReplace when not repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = false;
-                store.getters.order.damage.glassToReplace = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-            test("Rejects null glassToReplace when not repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = false;
-                store.getters.order.damage.glassToReplace = [];
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-        });
-        describe("Package requirements", () => {
-            test("Accepts null glassParts when is repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = true;
-                store.getters.order.lineItems.glassParts = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(true);
-            });
-            test("Rejects null glassParts when not repair", () => {
-                // Arrange
-                store.getters.order.damage.isRepair = false;
-                store.getters.order.lineItems.glassParts = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-        });
-        describe("Service Location requirements", () => {
-            test("Accepts null provider address when mobile appointment", () => {
-                // Arrange
-                store.getters.order.serviceLocation.appointmentType = "Mobile";
-                store.getters.order.serviceLocation.provider.address = {};
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(true);
-            });
-            test("Reject null provider address when non-mobile appointment", () => {
-                // Arrange
-                store.getters.order.serviceLocation.appointmentType = "Inshop";
-                store.getters.order.serviceLocation.provider.address = {};
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-            test("Accepts null service location address when non-mobile appointment", () => {
-                // Arrange
-                store.getters.order.serviceLocation.appointmentType = "Inshop";
-                store.getters.order.serviceLocation.address = null;
-                store.getters.order.serviceLocation.address2 = null;
-                store.getters.order.serviceLocation.zipCode = null;
-                store.getters.order.serviceLocation.city = null;
-                store.getters.order.serviceLocation.state = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(true);
-            });
-            test("Rejects null service location address when mobile appointment", () => {
-                // Arrange
-                store.getters.order.serviceLocation.appointmentType = "Mobile";
-                store.getters.order.serviceLocation.address = null;
-                store.getters.order.serviceLocation.address2 = null;
-                store.getters.order.serviceLocation.zipCode = null;
-                store.getters.order.serviceLocation.city = null;
-                store.getters.order.serviceLocation.state = null;
-
-                const { wrapper } = setupMocks({});
-
-                // Act
-                const isValid = wrapper.vm.arePagePrerequisitesValid();
-
-                // Assert
-                expect(isValid).toBe(false);
-            });
-        });
-    });
-});
-
-function setupMocks(customMountOptions) {
-    customMountOptions.store = store;
-
-    const mountOptions = getMountOptions(customMountOptions);
-
-    const mockMixin = {
-        methods: {
-            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-                return `${widgetName} ${cmsFieldName}`;
-            }),
-        },
-    };
-
-    mountOptions.global.mixins = [mockMixin];
-
-    const wrapper = shallowMount(review, mountOptions);
-    wrapper.vm.setCmsContent = jest.fn();
-    return { wrapper };
-}

src/layouts/review/review.vue

@@ -1,330 +0,0 @@
-<template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <!-- When customer-details is added: v-slot="{ meta }" -->
-        <div class="container-fluid">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
-
-                    <textBlock
-                        :customText="subHeaderTitle"
-                        typeStyle="h5"
-                        justifyText="center"
-                        margin="mt-1"
-                        class="dark-header" />
-                    <textBlock
-                        :customText="subHeaderBody"
-                        typeStyle="body"
-                        justifyText="left"
-                        margin="mt-0 mb-2" />
-
-                    <buttonMain
-                        ref="buttonMain"
-                        isPrimary
-                        :buttonText="forwardButtonText"
-                        loaderColor="white"
-                        class="mb-2 w-100"
-                        @click-event="forwardButtonAction" />
-
-                    <div>
-                        <hr />
-                    </div>
-
-                    <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"
-                            damageLocationsWidgetName="DamageLocationsWidget"
-                            :damage="damageInfo"
-                            @edit-clicked="editDamage" />
-
-                        <hr class="my-0" />
-
-                        <servicePackageReview
-                            ref="servicePackageReview"
-                            servicePackageOptionsCmsName="ServicePackageTitle"
-                            defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
-                            vapsItemsCmsName="VapsItemDescriptions"
-                            :damage="damageInfo"
-                            :lineItems="lineItems"
-                            @edit-clicked="editServicePackage" />
-
-                        <hr class="my-0" />
-
-                        <serviceLocationReview
-                            cmsWidgetName="ServiceLocationTitleWidget"
-                            :serviceLocation="serviceLocationInfo"
-                            @edit-clicked="editServiceLocation" />
-
-                        <hr class="my-0" />
-
-                        <scheduleReview
-                            cmsWidgetName="ScheduleWidget"
-                            :appointmentType="appointmentType"
-                            @edit-clicked="editSchedule" />
-
-                        <hr class="my-0" />
-
-                        <customerReview
-                            cmsWidgetName="CustomerReviewWidget"
-                            :customer="customerInfo"
-                            @edit-clicked="editCustomerDetails" />
-                    </div>
-
-                    <div>
-                        <hr class="my-0" />
-                    </div>
-
-                    <navbar
-                        cmsWidgetName="FunnelFooterWidget"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form>
-</template>
-
-<script>
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import navbar from "@/fmg-components/nav-bar/nav-bar";
-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 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 scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
-import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
-
-import { AppointmentTypeStrings } from "@/constants/schedule-constants";
-
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import store from "@/store";
-
-// Validation
-import { Form } from "vee-validate";
-
-export default {
-    name: "review",
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-
-        const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-            {
-                resultKey: "servicePackageData",
-                promise: servicePackageInitialDataPromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-
-            vm.$refs.servicePackageReview.initializeComponent(resultMap.servicePackageData);
-        });
-    },
-    data() {
-        return {};
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            // Vehicle
-            const vehicle = store.getters.order.vehicle;
-            const vehicleReqs = !!(vehicle.year && vehicle.make && vehicle.model && vehicle.style);
-
-            // Damage
-            const damage = store.getters.order.damage;
-            const damageReqs = !!(
-                (damage.isRepair && damage.numberOfChips) ||
-                (!damage.isRepair && damage.glassToReplace?.length)
-            );
-
-            // Service Package
-            const lineItems = store.getters.order.lineItems;
-            // damageReqs handles checking for damage, even though it is also required for this section.
-            const packageReqs = !!(
-                (damage.isRepair || lineItems.glassParts) &&
-                lineItems.supportingItems
-            );
-
-            // Service Location
-            const serviceLocation = store.getters.order.serviceLocation;
-            const mobileReqs = !!(
-                serviceLocation.address &&
-                serviceLocation.city &&
-                serviceLocation.state &&
-                serviceLocation.zipCode
-            );
-
-            const providerLocation = serviceLocation.provider.address;
-            const dropOffInshopReqs = !!(
-                providerLocation.streetAddress &&
-                providerLocation.city &&
-                providerLocation.state &&
-                providerLocation.zipCode
-            );
-
-            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
-
-            const serviceLocationReqs =
-                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
-
-            // Schedule
-            const schedule = store.getters.order.schedule;
-            const scheduleReqs = !!(
-                schedule.date &&
-                schedule.startTime &&
-                schedule.endTime &&
-                schedule.jobMaxMinutes &&
-                schedule.jobMinMinutes
-            );
-
-            // Customer
-            const customer = store.getters.order.customer;
-            const customerReqs = !!(
-                customer.firstName &&
-                customer.lastName &&
-                customer.phoneNumber &&
-                customer.emailAddress
-            );
-
-            return (
-                vehicleReqs &&
-                damageReqs &&
-                packageReqs &&
-                serviceLocationReqs &&
-                scheduleReqs &&
-                customerReqs
-            );
-        },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-        forwardButtonAction() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_FORWARD,
-                this.$route
-            );
-        },
-        editVehicle() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_VEHICLE_EDIT,
-                this.$route
-            );
-        },
-        editDamage() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_DAMAGE_EDIT,
-                this.$route
-            );
-        },
-        editServicePackage() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_SERVICE_PACKAGE_EDIT,
-                this.$route
-            );
-        },
-        editServiceLocation() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
-                this.$route
-            );
-        },
-        editSchedule() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_SCHEDULE_EDIT,
-                this.$route
-            );
-        },
-        editCustomerDetails() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_CUSTOMER_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;
-        },
-        lineItems() {
-            return this.$store.getters.lineItems;
-        },
-        serviceLocationInfo() {
-            return this.$store.getters.order.serviceLocation;
-        },
-        appointmentType() {
-            return this.$store.getters.order.serviceLocation.appointmentType;
-        },
-        customerInfo() {
-            return this.$store.getters.order.customer;
-        },
-    },
-    components: {
-        funnelHeader,
-        navbar,
-        vehicleBanner,
-        buttonMain,
-        textBlock,
-        vehicleReview,
-        damageReview,
-        servicePackageReview,
-        serviceLocationReview,
-        scheduleReview,
-        customerReview,
-        Form,
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.dark-header {
-    color: $black;
-    line-height: 1.6;
-}
-</style>

src/router/router-constants/fmgPage-values.js

@@ -15,7 +15,6 @@ const fmgPageValues = {
     HERITAGE: "heritage",
     SCHEDULE: "schedule",
     CUSTOMER_DETAILS: "customer-details",
-    REVIEW: "review",
     PAYMENT_METHOD: "payment-method",
     PAYMENT: "payment",
     PAYMENT_PIA_RETURN: "payment-pia-return",

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

@@ -44,14 +44,6 @@ const navigationScenarios = {
     // Schedule
     CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
 
-    // Review
-    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",
-    CLICKED_SCHEDULE_EDIT: "CLICKED_SCHEDULE_EDIT",
-    CLICKED_CUSTOMER_EDIT: "CLICKED_CUSTOMER_EDIT",
-
     // Payment
     CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
     PIA_ERROR: "PIA_ERROR",

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

@@ -428,43 +428,6 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_BACK,
                     destinationFmgPageValue: fmgPageValues.SCHEDULE,
                 },
-                {
-                    scenario: navigationScenarios.CLICKED_FORWARD,
-                    destinationFmgPageValue: fmgPageValues.REVIEW,
-                },
-            ],
-        },
-        {
-            fmgPageValue: fmgPageValues.REVIEW,
-            maps: [
-                {
-                    scenario: navigationScenarios.CLICKED_VEHICLE_EDIT,
-                    destinationFmgPageValue: fmgPageValues.VEHICLE,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_DAMAGE_EDIT,
-                    destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_SERVICE_PACKAGE_EDIT,
-                    destinationFmgPageValue: fmgPageValues.QUOTE,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_BACK,
-                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
-                    destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_SCHEDULE_EDIT,
-                    destinationFmgPageValue: fmgPageValues.SCHEDULE,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_CUSTOMER_EDIT,
-                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
-                },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
@@ -476,7 +439,7 @@ const routingTable = function (store) {
             maps: [
                 {
                     scenario: navigationScenarios.CLICKED_BACK,
-                    destinationFmgPageValue: fmgPageValues.REVIEW,
+                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,