Change modal to back-nav

src/layouts/review/customer-details-modal-question/customer-details-modal-question.spec.js

@@ -1,150 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-
-import customerDetailsModalQuestion from "@/layouts/review/customer-details-modal-question/customer-details-modal-question";
-
-const testConstants = {
-    previousCustomerValues: {
-        firstName: "First",
-        lastName: "Last",
-        emailAddress: "builddigitaltest@safelite.com",
-        phoneNumber: "111-111-1111",
-        isSmsOptIn: false,
-    },
-    newValues: {
-        firstName: "New First",
-        lastName: "New Last",
-        emailAddress: "builddigitaltest2@safelite.com",
-        phoneNumber: "222-222-2222",
-        isSmsOptIn: true,
-    },
-};
-
-let cmsContent;
-
-describe("Customer Details Modal", () => {
-    beforeEach(() => {
-        cmsContent = {};
-    });
-
-    describe("Submit", () => {
-        test("Should push to store if a field has changed", async () => {
-            // Arrange
-            let props = generateDefaultProps();
-
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            wrapper.vm.onModalOpened();
-
-            wrapper.vm.firstName = testConstants.newValues.firstName;
-
-            await wrapper.vm.setContactDetails();
-            await wrapper.vm.$nextTick();
-
-            // Assert
-            expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
-            expect(wrapper.vm.closeModal).toHaveBeenCalled();
-        });
-
-        test("Should not push to store if no fields have changed", async () => {
-            // Arrange
-            let props = generateDefaultProps();
-
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            wrapper.vm.onModalOpened();
-
-            await wrapper.vm.setContactDetails();
-            await wrapper.vm.$nextTick();
-
-            // Assert
-            expect(wrapper.vm.dispatchStoreAction).not.toHaveBeenCalled();
-            expect(wrapper.vm.closeModal).toHaveBeenCalled();
-        });
-    });
-
-    describe("Default values", () => {
-        test("Should populate on open", () => {
-            // Arrange
-            let props = generateDefaultProps();
-
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            wrapper.vm.onModalOpened();
-
-            // Assert
-            expect(wrapper.vm.firstName).toBe(testConstants.previousCustomerValues.firstName);
-            expect(wrapper.vm.lastName).toBe(testConstants.previousCustomerValues.lastName);
-            expect(wrapper.vm.emailAddress).toBe(testConstants.previousCustomerValues.emailAddress);
-            expect(wrapper.vm.phoneNumber).toBe(testConstants.previousCustomerValues.phoneNumber);
-            expect(wrapper.vm.isSmsOptIn).toBe(testConstants.previousCustomerValues.isSmsOptIn);
-        });
-
-        test("Should replace old values on open", async () => {
-            // Arrange
-            let props = generateDefaultProps();
-
-            const { wrapper } = setupMocks({
-                propsData: props,
-            });
-
-            // Act
-            wrapper.vm.firstName = testConstants.newValues.firstName;
-            wrapper.vm.lastName = testConstants.newValues.lastName;
-            wrapper.vm.emailAddress = testConstants.newValues.emailAddress;
-            wrapper.vm.phoneNumber = testConstants.newValues.phoneNumber;
-            wrapper.vm.isSmsOptIn = testConstants.newValues.isSmsOptIn;
-
-            wrapper.vm.onModalOpened();
-
-            // Assert
-            expect(wrapper.vm.firstName).toBe(testConstants.previousCustomerValues.firstName);
-            expect(wrapper.vm.lastName).toBe(testConstants.previousCustomerValues.lastName);
-            expect(wrapper.vm.emailAddress).toBe(testConstants.previousCustomerValues.emailAddress);
-            expect(wrapper.vm.phoneNumber).toBe(testConstants.previousCustomerValues.phoneNumber);
-            expect(wrapper.vm.isSmsOptIn).toBe(testConstants.previousCustomerValues.isSmsOptIn);
-        });
-    });
-});
-
-function generateDefaultProps() {
-    return {
-        previousCustomerValues: {
-            firstName: testConstants.previousCustomerValues.firstName,
-            lastName: testConstants.previousCustomerValues.lastName,
-            emailAddress: testConstants.previousCustomerValues.emailAddress,
-            phoneNumber: testConstants.previousCustomerValues.phoneNumber,
-            isSmsOptIn: testConstants.previousCustomerValues.isSmsOptIn,
-        },
-    };
-}
-
-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(customerDetailsModalQuestion, mountOptions);
-    wrapper.vm.setCmsContent = jest.fn();
-    wrapper.vm.openModal = jest.fn();
-    wrapper.vm.closeModal = jest.fn();
-    wrapper.vm.dispatchStoreAction = jest.fn();
-    return { wrapper };
-}

src/layouts/review/customer-details-modal-question/customer-details-modal-question.vue

@@ -1,148 +0,0 @@
-<template>
-    <transition name="fade" mode="out-in">
-        <div class="customer-details-question">
-            <modal
-                ref="CustomerDetailsModal"
-                headerText="Contact details"
-                footerButtonText="Save contact details"
-                :onModalOpenedCallback="onModalOpened"
-                :onModalClosedCallback="onModalClosed"
-                @isModalOpened="setModalStatus"
-                @footer-button-event="setContactDetails">
-                <template v-if="isModalOpened">
-                    <textboxQuestion
-                        class="mb-4"
-                        cmsWidgetName="CustomerFirstNameWidget"
-                        v-model="firstName"
-                        ref="firstName"
-                        customInputId="firstName"
-                        validation-rules="first-name-required" />
-                    <textboxQuestion
-                        class="mb-4"
-                        cmsWidgetName="CustomerLastNameWidget"
-                        v-model="lastName"
-                        ref="lastName"
-                        customInputId="lastName"
-                        validation-rules="last-name-required" />
-                    <textboxQuestion
-                        class="mb-4"
-                        cmsWidgetName="CustomerEmailWidget"
-                        v-model="emailAddress"
-                        ref="emailAddress"
-                        customInputId="emailAddress"
-                        validation-rules="email-address-required|email-address-format" />
-                    <phoneNumberQuestion
-                        class="mb-4"
-                        cmsWidgetName="CustomerPhoneWidget"
-                        v-model="phoneNumber"
-                        ref="phoneNumber"
-                        isRequired
-                        validation-rules="phone-number-required" />
-                    <checkboxQuestion
-                        class="mb-5"
-                        cmsWidgetName="CustomerTextMeWidget"
-                        v-model="isSmsOptIn" />
-                    <textBlock cmsWidgetName="CustomerTextDisclaimerWidget" typeStyle="caption" />
-                </template>
-            </modal>
-        </div>
-    </transition>
-</template>
-
-<script>
-import modal from "@/digital-components/modal/modal";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
-import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
-import textBlock from "@/digital-components/text-block/text-block";
-import { errorMessages } from "@/constants/error-messages";
-import { required, regex } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-// DEFINE VALIDATION RULES
-defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
-defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
-defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
-defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-defineRule(
-    "email-address-format",
-    regex(
-        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
-        errorMessages.EMAIL_ADDRESS_FORMAT
-    )
-);
-
-export default {
-    name: "customer-details-modal-question",
-    data() {
-        return {
-            isModalOpened: false,
-            firstName: "",
-            lastName: "",
-            emailAddress: "",
-            phoneNumber: "",
-            isSmsOptIn: false,
-        };
-    },
-    props: {
-        previousCustomerValues: Object,
-    },
-    computed: {
-        modal() {
-            return this.$refs.CustomerDetailsModal;
-        },
-        haveCustomerDetailsChanged() {
-            return (
-                this.firstName !== this.previousCustomerValues?.firstName ||
-                this.lastName !== this.previousCustomerValues?.lastName ||
-                this.emailAddress !== this.previousCustomerValues?.emailAddress ||
-                this.phoneNumber !== this.previousCustomerValues?.phoneNumber ||
-                this.isSmsOptIn !== this.previousCustomerValues?.isSmsOptIn
-            );
-        },
-    },
-    methods: {
-        openModal() {
-            this.modal.openModal();
-        },
-        closeModal() {
-            this.modal.closeModal();
-        },
-        onModalOpened() {
-            this.firstName = this.previousCustomerValues?.firstName ?? "";
-            this.lastName = this.previousCustomerValues?.lastName ?? "";
-            this.emailAddress = this.previousCustomerValues?.emailAddress ?? "";
-            this.phoneNumber = this.previousCustomerValues?.phoneNumber ?? "";
-            this.isSmsOptIn = this.previousCustomerValues?.isSmsOptIn ?? false;
-        },
-        onModalClosed() {},
-        setModalStatus(isOpened) {
-            this.isModalOpened = isOpened;
-        },
-        async setContactDetails() {
-            if (this.haveCustomerDetailsChanged) {
-                await this.dispatchStoreAction(
-                    this.storeActions.SAVE_CUSTOMER_DETAILS,
-                    {
-                        firstName: this.firstName,
-                        lastName: this.lastName,
-                        emailAddress: this.emailAddress,
-                        phoneNumber: this.phoneNumber,
-                        isSmsOptIn: this.isSmsOptIn,
-                    },
-                    false
-                );
-            }
-
-            this.closeModal();
-        },
-    },
-    components: {
-        modal,
-        textboxQuestion,
-        phoneNumberQuestion,
-        checkboxQuestion,
-        textBlock,
-    },
-};
-</script>

src/layouts/review/review.vue

@@ -89,10 +89,6 @@
                 <hr class="my-0" />
             </div>
 
-            <customerDetailsModalQuestion
-                ref="customerDetailsModalQuestion"
-                :previousCustomerValues="customerInfo" />
-
             <funnelFooter
                 cmsWidgetName="FunnelFooterWidget"
                 @back-clicked="backButtonAction"
@@ -115,8 +111,6 @@ import serviceLocationReview from "@/layouts/review/review-sections/service-loca
 import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
 import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
 
-import customerDetailsModalQuestion from "@/layouts/review/customer-details-modal-question/customer-details-modal-question.vue";
-
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 
@@ -190,7 +184,10 @@ export default {
             );
         },
         editCustomerDetails() {
-            this.$refs.customerDetailsModalQuestion.openModal();
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_CUSTOMER_EDIT,
+                this.$route
+            );
         },
     },
     computed: {
@@ -234,7 +231,6 @@ export default {
         serviceLocationReview,
         scheduleReview,
         customerReview,
-        customerDetailsModalQuestion,
     },
 };
 </script>

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

@@ -52,6 +52,7 @@ const navigationScenarios = {
     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",
 };
 
 export { navigationScenarios };

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

@@ -488,6 +488,10 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_SCHEDULE_EDIT,
                     destinationFmgPageValue: fmgPageValues.SCHEDULE,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_CUSTOMER_EDIT,
+                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+                },
             ],
         },
     ];