INSR-7752: Remove redundant fields from store, fix unit tests

src/digital-components/textarea-question/textarea-question.spec.js

@@ -67,7 +67,7 @@ describe('textarea-question.vue', () => {
                 },
                 mixins: [mockMixin]
             });
-            const expected = `${maxLength}/${maxLength}`;
+            const expected = `${maxLength} characters allowed`;
 
             // Act
             // Assert

src/layouts/contact-details/contact-details.spec.js

@@ -32,65 +32,175 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(siteSubHeader.exists()).toBe(true);
         });
-        test('Should render first name question subcomponent', () => {
+        test('Should render appointment information alert', () => {
             // Arrange
             const wrapper = shallowMount(contactDetails, getMountOptions());
 
             // Act
-            const firstNameQuestion = wrapper.findComponent({ ref: 'firstNameQuestion' });
+            const appointmentInformationAlert = wrapper.findComponent({ ref: 'appointmentInformationAlert' });
 
             // Assert
-            expect(firstNameQuestion.exists()).toBe(true);
+            expect(appointmentInformationAlert.exists()).toBe(true);
         });
-        test('Should render last name question subcomponent', () => {
+        test('Should render same as policy address question subcomponent if service zip is same as customer zip', async () => {
             // Arrange
-            const wrapper = shallowMount(contactDetails, getMountOptions());
+            const mountOptions = getMountOptions();
-
+            
-            // Act
+            const customerStreetAddress = getRandomString(10, 50);
-            const lastNameQuestion = wrapper.findComponent({ ref: 'lastNameQuestion' });
+            const customerStreetAddress2 = getRandomString(0, 50);
-
+            const customerCity = getRandomString(4, 20);
-            // Assert
+            const customerState = getRandomString(2, 2);
-            expect(lastNameQuestion.exists()).toBe(true);
+            const serviceStreetAddress = getRandomString(10, 50);
-        });
+            const serviceStreetAddress2 = getRandomString(0, 50);
-        test('Should render email question subcomponent', () => {
+            const serviceCity = getRandomString(4, 20);
-            // Arrange
+            const serviceState = getRandomString(2, 2);
-            const wrapper = shallowMount(contactDetails, getMountOptions());
+            const zipCode = getRandomInt(10000, 99999).toString();
-
+            const mainInitialState = {
-            // Act
+                order: {
-            const emailQuestion = wrapper.findComponent({ ref: 'emailQuestion' });
+                    customer: {
-
+                        address: {
-            // Assert
+                            streetAddress: customerStreetAddress,
-            expect(emailQuestion.exists()).toBe(true);
+                            streetAddress2: customerStreetAddress2,
-        });
+                            city: customerCity,
-        test('Should render phone number question subcomponent', () => {
+                            state: customerState,
-            // Arrange
+                            zipCode
-            const wrapper = shallowMount(contactDetails, getMountOptions());
+                        }
-
+                    },
-            // Act
+                    serviceLocation: {
-            const phoneNumberQuestion = wrapper.findComponent({ ref: 'phoneNumberQuestion' });
+                        streetAddress: serviceStreetAddress,
-
+                        streetAddress2: serviceStreetAddress2,
-            // Assert
+                        city: serviceCity,
-            expect(phoneNumberQuestion.exists()).toBe(true);
+                        state: serviceState,
-        });
+                        zipCode
-        test('Should render text updates checkbox subcomponent', () => {
+                    }
-            // Arrange
-            const checkboxLabel = getRandomString(50, 100);
-            const mockMixin = {
-                methods: {
-                    getCmsContent: jest.fn().mockImplementation(() => checkboxLabel),
-                    setCmsContent: jest.fn()
                 }
             };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+            const wrapper = shallowMount(contactDetails, mountOptions);
+
+            await wrapper.vm.$nextTick();
+
+            // Act
+            const sameAsPolicyAddressQuestion = wrapper.findComponent({ ref: 'sameAsPolicyAddressQuestion' });
+
+            // Assert
+            expect(sameAsPolicyAddressQuestion.exists()).toBe(true);
+        });
+        test('Should not render same as policy address question subcomponent if service zip is different from customer zip', () => {
+            // Arrange
             const mountOptions = getMountOptions();
-            mountOptions.mixins = [mockMixin];
+
+            const firstName = getRandomString(4, 15);
+            const lastName = getRandomString(4, 15);
+            const emailAddress = getRandomString(10, 20);
+            const servicePhone = getRandomInt(1000000000, 9999999999).toString();
+            const testZipCode = getRandomInt(10000, 99999);
+            const customerZipCode = testZipCode.toString();
+            const serviceZipCode = (testZipCode + 1).toString();
+            const mainInitialState = {
+                order: {
+                    customer: {
+                        firstName,
+                        lastName,
+                        emailAddress,
+                        address: {
+                            zipCode: customerZipCode
+                        }
+                    },
+                    contactInfo: {
+                        servicePhone
+                    },
+                    serviceLocation: {
+                        zipCode: serviceZipCode
+                    }
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
             const wrapper = shallowMount(contactDetails, mountOptions);
 
             // Act
-            const textUpdatesCheckbox = wrapper.findComponent({ ref: 'requestTextUpdatesCheckbox' });
+            const sameAsPolicyAddressQuestion = wrapper.findComponent({ ref: 'sameAsPolicyAddressQuestion' });
 
             // Assert
-            expect(textUpdatesCheckbox.exists()).toBe(true);
+            expect(sameAsPolicyAddressQuestion.exists()).toBe(false);
-            expect(wrapper.vm.requestTextUpdatesCheckboxText).toBe(`${checkboxLabel}*`);
+        });
+        test('Should render address question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const addressQuestion = wrapper.findComponent({ ref: 'addressQuestion' });
+
+            // Assert
+            expect(addressQuestion.exists()).toBe(true);
+        });
+        test('Should render apartment question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const address2Question = wrapper.findComponent({ ref: 'address2Question' });
+
+            // Assert
+            expect(address2Question.exists()).toBe(true);
+        });
+        test('Should render city question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const cityQuestion = wrapper.findComponent({ ref: 'cityQuestion' });
+
+            // Assert
+            expect(cityQuestion.exists()).toBe(true);
+        });
+        test('Should render state question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const stateQuestion = wrapper.findComponent({ ref: 'stateQuestion' });
+
+            // Assert
+            expect(stateQuestion.exists()).toBe(true);
+        });
+        test('Should render zip code question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const zipCodeQuestion = wrapper.findComponent({ ref: 'zipCodeQuestion' });
+
+            // Assert
+            expect(zipCodeQuestion.exists()).toBe(true);
+        });
+        test('Should render change zip code alert', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const changeZipCodeAlert = wrapper.findComponent({ ref: 'changeZipCodeAlert' });
+
+            // Assert
+            expect(changeZipCodeAlert.exists()).toBe(true);
+        });
+        test('Should render vehicle protected question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(contactDetails, getMountOptions());
+
+            // Act
+            const vehicleProtectedQuestion = wrapper.findComponent({ ref: 'vehicleProtectedQuestion' });
+
+            // Assert
+            expect(vehicleProtectedQuestion.exists()).toBe(true);
         });
         test('Should render technician notes textarea question subcomponent', () => {
             // Arrange
@@ -102,46 +212,15 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(notesQuestion.exists()).toBe(true);
         });
-        test('Should render disclaimer text', () => {
+        test('Should render clearance text subcomponent', () => {
-            // Arrange
-            const disclaimerText = getRandomString(50, 100);
-            const mockMixin = {
-                methods: {
-                    getCmsContent: jest.fn().mockImplementation(() => disclaimerText),
-                    setCmsContent: jest.fn()
-                }
-            };
-            const mountOptions = getMountOptions();
-            mountOptions.mixins = [mockMixin];
-            const wrapper = shallowMount(contactDetails, mountOptions);
-            const expectedDisclaimerText = `*${disclaimerText} I also agree to Safelite's`;
-
-            // Act
-            const componentText = wrapper.text();
-
-            // Assert
-            expect(wrapper.vm.textUpdateDisclaimerText).toBe(`*${disclaimerText}`);
-            expect(componentText).toContain(expectedDisclaimerText);
-        });
-        test('Should render privacy policy link', () => {
             // Arrange
             const wrapper = shallowMount(contactDetails, getMountOptions());
 
             // Act
-            const privacyPolicyLink = wrapper.findComponent({ ref: 'privacyPolicyLink' });
+            const clearanceText = wrapper.findComponent({ ref: 'clearanceText' });
 
             // Assert
-            expect(privacyPolicyLink.exists()).toBe(true);
+            expect(clearanceText.exists()).toBe(true);
-        });
-        test('Should render terms of use link', () => {
-            // Arrange
-            const wrapper = shallowMount(contactDetails, getMountOptions());
-
-            // Act
-            const termsOfUseLink = wrapper.findComponent({ ref: 'termsOfUseLink' });
-
-            // Assert
-            expect(termsOfUseLink.exists()).toBe(true);
         });
         test('Should render site footer', () => {
             // Arrange
@@ -153,82 +232,48 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(footer.exists()).toBe(true);
         });
-        test('Mocked store with no contact info yields expected data', () => {
+        test('Mocked store yields expected data', () => {
             // Arrange
             const mountOptions = getMountOptions();
 
-            const firstName = getRandomString(4, 15);
+            const address = getRandomString(10, 50);
-            const lastName = getRandomString(4, 15);
+            const address2 = getRandomString(0, 50);
-            const emailAddress = getRandomString(10, 20);
+            const city = getRandomString(4, 20);
-            const servicePhone = getRandomInt(1000000000, 9999999999).toString();
+            const state = getRandomString(2, 2);
+            const zipCode = getRandomInt(10000, 99999).toString();
+            const notesForTechnician = getRandomString(1, 100);
+            const isVehicleProtected = getRandomBoolean();
             const mainInitialState = {
                 order: {
-                    customer: {
+                    serviceLocation: {
-                        firstName,
+                        address,
-                        lastName,
+                        address2,
-                        emailAddress
+                        city,
+                        state,
+                        zipCode,
+                        isVehicleProtected
                     },
                     contactInfo: {
-                        servicePhone
+                        notesForTechnician
                     }
                 }
             };
-            mountOptions.global = {
+            mountOptions.global.plugins = [createTestingPinia({
-                plugins: [createTestingPinia({
+                initialState: {
-                    initialState: {
+                    main: mainInitialState
-                        main: mainInitialState
+                }
-                    }
+            })];
-                })]
-            };
 
             const wrapper = shallowMount(contactDetails, mountOptions);
 
             // Assert
-            expect(wrapper.vm.firstName).toBe(firstName);
+            expect(wrapper.vm.address).toBe(address);
-            expect(wrapper.vm.lastName).toBe(lastName);
+            expect(wrapper.vm.address2).toBe(address2);
-            expect(wrapper.vm.emailAddress).toBe(emailAddress);
+            expect(wrapper.vm.city).toBe(city);
-            expect(wrapper.vm.phoneNumber).toBe(servicePhone);
+            expect(wrapper.vm.state).toBe(state);
-        });
+            expect(wrapper.vm.zipCode).toBe(zipCode);
-        test('Mock store with contact info yields expected data', () => {
+            expect(wrapper.vm.isVehicleProtected).toBe(isVehicleProtected);
-            // Arrange
+            expect(wrapper.vm.notesForTechnician).toBe(notesForTechnician);
-            const customer = {
-                firstName: getRandomString(4, 15),
-                lastName: getRandomString(4, 15),
-                emailAddress: getRandomString(10, 20),
-                phoneNumber: getRandomInt(1000000000, 9999999999)
-            };
-            const contactInfo = {
-                firstName: getRandomString(4, 15),
-                lastName: getRandomString(4, 15),
-                emailAddress: getRandomString(10, 20),
-                servicePhone: getRandomInt(1000000000, 9999999999),
-                requestTextUpdates: getRandomBoolean(),
-                notesForTechnician: getRandomString(50, 100)
-            };
-            const mainInitialState = {
-                order: {
-                    customer,
-                    contactInfo
-                }
-            };
-            const mountOptions = getMountOptions();
-            mountOptions.global = {
-                plugins: [createTestingPinia({
-                    initialState: {
-                        main: mainInitialState
-                    }
-                })]
-            };
-
-            const wrapper = shallowMount(contactDetails, mountOptions);
-
-            // Assert
-            expect(wrapper.vm.firstName).toBe(contactInfo.firstName);
-            expect(wrapper.vm.lastName).toBe(contactInfo.lastName);
-            expect(wrapper.vm.emailAddress).toBe(contactInfo.emailAddress);
-            expect(wrapper.vm.phoneNumber).toBe(contactInfo.servicePhone);
-            expect(wrapper.vm.requestTextUpdates).toBe(contactInfo.requestTextUpdates);
-            expect(wrapper.vm.notesForTechnician).toBe(contactInfo.notesForTechnician);
         });
     });
 
@@ -250,7 +295,7 @@ describe('contactDetails.vue', () => {
             expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
-        test('Forward button clicked triggers appropriate navigation when safelite shop', () => {
+        test('Forward button clicked triggers appropriate navigation', () => {
             // Arrange
             const mountOptions = getMountOptions({
                 router: {
@@ -276,37 +321,44 @@ describe('contactDetails.vue', () => {
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
             expect(wrapper.vm.$router.navigate)
-                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP, undefined);
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
         });
-        test('Forward button clicked triggers appropriate navigation when TPA shop', () => {
+        test('Forward button click updates service location info', () => {
             // Arrange
             const mountOptions = getMountOptions({
                 router: {
                     navigate: jest.fn()
-                },
+                }
-                navigationScenarios
             });
-            const mainInitialState = {
-                order: {
-                    serviceLocation: { IsSafeliteProvider: false }
-                }
-            };
-            mountOptions.global.plugins = [createTestingPinia({
-                initialState: {
-                    main: mainInitialState
-                }
-            })];
             const wrapper = shallowMount(contactDetails, mountOptions);
+            const address = getRandomString(10, 50);
+            const address2 = getRandomString(0, 50);
+            const city = getRandomString(4, 20);
+            const state = getRandomString(2, 2);
+            const zipCode = getRandomInt(10000, 99999).toString();
+            const isVehicleProtected = getRandomBoolean().toString();
+            wrapper.setData({
+                address,
+                address2,
+                city,
+                state,
+                zipCode,
+                isVehicleProtected
+            });
 
             // Act
             wrapper.vm.forwardButtonAction();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(useMainStore().updateServiceLocation).toHaveBeenCalledWith({
-            expect(wrapper.vm.$router.navigate)
+                address,
-                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, undefined);
+                address2,
+                city,
+                isVehicleProtected
+            });
         });
-        test('Forward button click updates contact info', () => {
+
+        test('Forward button click updates notes for technician', () => {
             // Arrange
             const mountOptions = getMountOptions({
                 router: {
@@ -314,18 +366,8 @@ describe('contactDetails.vue', () => {
                 }
             });
             const wrapper = shallowMount(contactDetails, mountOptions);
-            const firstName = getRandomString(4, 15);
-            const lastName = getRandomString(4, 15);
-            const emailAddress = getRandomString(10, 20);
-            const phoneNumber = getRandomInt(1000000000, 9999999999).toString();
-            const requestTextUpdates = getRandomBoolean();
             const notesForTechnician = getRandomString(1, 100);
             wrapper.setData({
-                firstName,
-                lastName,
-                emailAddress,
-                phoneNumber,
-                requestTextUpdates,
                 notesForTechnician
             });
 
@@ -334,146 +376,8 @@ describe('contactDetails.vue', () => {
 
             // Assert
             expect(useMainStore().updateContactInfo).toHaveBeenCalledWith({
-                firstName,
-                lastName,
-                emailAddress,
-                requestTextUpdates,
                 notesForTechnician
             });
         });
-
-        test('Forward button click updates phone numbers request text updates', () => {
-            // Arrange
-            const mountOptions = getMountOptions({
-                router: {
-                    navigate: jest.fn()
-                }
-            });
-            const wrapper = shallowMount(contactDetails, mountOptions);
-            const phoneNumber = getRandomInt(1000000000, 9999999999).toString();
-            const requestTextUpdates = true;
-            wrapper.setData({
-                phoneNumber,
-                requestTextUpdates
-            });
-
-            // Act
-            wrapper.vm.forwardButtonAction();
-
-            // Assert
-            expect(useMainStore().updatePhoneNumbers).toHaveBeenCalledWith({
-                service: phoneNumber,
-                alternative: phoneNumber
-            });
-        });
-
-        test('Forward button click updates phone numbers dot not request text updates', () => {
-            // Arrange
-            const mountOptions = getMountOptions({
-                router: {
-                    navigate: jest.fn()
-                }
-            });
-            const wrapper = shallowMount(contactDetails, mountOptions);
-            const phoneNumber = getRandomInt(1000000000, 9999999999).toString();
-            const requestTextUpdates = false;
-            wrapper.setData({
-                phoneNumber,
-                requestTextUpdates
-            });
-
-            // Act
-            wrapper.vm.forwardButtonAction();
-
-            // Assert
-            expect(useMainStore().updatePhoneNumbers).toHaveBeenCalledWith({
-                home: phoneNumber,
-                service: phoneNumber
-            });
-        });
-    });
-
-    test('Mocked store with no contact info yields expected data', () => {
-        // Arrange
-        const mountOptions = getMountOptions();
-
-        const firstName = getRandomString(4, 15);
-        const lastName = getRandomString(4, 15);
-        const emailAddress = getRandomString(10, 20);
-        const servicePhone = getRandomInt(1000000000, 9999999999);
-        const mainInitialState = {
-            order: {
-                customer: {
-                    firstName,
-                    lastName,
-                    emailAddress
-                },
-                contactInfo: {
-                    firstName: null,
-                    lastName: null,
-                    emailAddress: null,
-                    servicePhone,
-                    requestTextUpdates: null,
-                    notesForTechnician: null
-                }
-            }
-        };
-        mountOptions.global = {
-            plugins: [createTestingPinia({
-                initialState: {
-                    main: mainInitialState
-                }
-            })]
-        };
-
-        const wrapper = shallowMount(contactDetails, mountOptions);
-
-        // Assert
-        expect(wrapper.vm.firstName).toBe(firstName);
-        expect(wrapper.vm.lastName).toBe(lastName);
-        expect(wrapper.vm.emailAddress).toBe(emailAddress);
-        expect(wrapper.vm.phoneNumber).toBe(servicePhone);
-    });
-
-    test('Mock store with contact info yields expected data', () => {
-        // Arrange
-        const customer = {
-            firstName: getRandomString(4, 15),
-            lastName: getRandomString(4, 15),
-            emailAddress: getRandomString(10, 20),
-            phoneNumber: getRandomInt(1000000000, 9999999999)
-        };
-        const contactInfo = {
-            firstName: getRandomString(4, 15),
-            lastName: getRandomString(4, 15),
-            emailAddress: getRandomString(10, 20),
-            servicePhone: getRandomInt(1000000000, 9999999999),
-            requestTextUpdates: getRandomBoolean(),
-            notesForTechnician: getRandomString(50, 100)
-        };
-        const mainInitialState = {
-            order: {
-                customer,
-                contactInfo
-            }
-        };
-        const mountOptions = getMountOptions();
-        mountOptions.global = {
-            plugins: [createTestingPinia({
-                initialState: {
-                    main: mainInitialState
-                }
-            })]
-        };
-
-        const wrapper = shallowMount(contactDetails, mountOptions);
-
-        // Assert
-        expect(wrapper.vm.firstName).toBe(contactInfo.firstName);
-        expect(wrapper.vm.lastName).toBe(contactInfo.lastName);
-        expect(wrapper.vm.emailAddress).toBe(contactInfo.emailAddress);
-        expect(wrapper.vm.phoneNumber).toBe(contactInfo.servicePhone);
-        expect(wrapper.vm.requestTextUpdates).toBe(contactInfo.requestTextUpdates);
-        expect(wrapper.vm.notesForTechnician).toBe(contactInfo.notesForTechnician);
     });
 });

src/layouts/contact-details/contact-details.vue

@@ -236,10 +236,6 @@ export default {
          */
         forwardButtonAction() {
             const contactInfo = {
-                firstName: this.firstName,
-                lastName: this.lastName,
-                emailAddress: this.emailAddress,
-                requestTextUpdates: this.requestTextUpdates,
                 notesForTechnician: this.notesForTechnician
             };
             useMainStore().updateContactInfo(contactInfo);
@@ -251,18 +247,6 @@ export default {
                 isVehicleProtected: this.isVehicleProtected || 'false'
             });
 
-            if (this.requestTextUpdates) {
-                useMainStore().updatePhoneNumbers({
-                    service: this.phoneNumber,
-                    alternative: this.phoneNumber
-                });
-            } else {
-                useMainStore().updatePhoneNumbers({
-                    home: this.phoneNumber,
-                    service: this.phoneNumber
-                });
-            }
-
             this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
         copyPolicyAddressToServiceLocation() {

src/layouts/order-confirmation/order-confirmation.spec.js

@@ -79,12 +79,14 @@ const initialStore = {
             isInsurance: true,
             paymentMethod: paymentMethods.PAY_AT_TIME_OF_SERVICE
         },
-        contactInfo: {
+        customer: {
             firstName: 'Test',
             lastName: 'Test',
-            servicePhone: '111-111-1111',
             emailAddress: 'test@email.com'
         },
+        contactInfo: {
+            servicePhone: '123-456-7890'
+        },
         damage: {
             isRepair: false
         },
@@ -138,7 +140,14 @@ const sessionStorage = {
         make: 'Honda',
         model: 'Civic'
     },
-    customer: {},
+    customer: {
+        firstName: 'Test',
+        lastName: 'Test',
+        emailAddress: 'test@email.com'
+    },
+    contactInfo: {
+        servicePhone: '123-456-7890'
+    },
     customerPortalLoginToken: 'token',
     currentDeductible: {
         replace: 100,

src/layouts/payment-page/payment-page.spec.js

@@ -182,10 +182,12 @@ const defaultOrder = {
             },
             techNotes: ''
         },
-        contactInfo: {
+        customer: {
             firstName: 'first',
             lastName: 'last',
-            emailAddress: 'builddigitaltest@safelite.com',
+            emailAddress: 'builddigitaltest@safelite.com'
+        },
+        contactInfo: {
             servicePhone: '555-555-5555'
         },
         damage: {

src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js

@@ -38,10 +38,12 @@ describe('contact-details-drawer', () => {
         const servicePhone = '606-009-2943';
         const mainInitialState = {
             order: {
-                contactInfo: {
+                customer: {
                     firstName,
                     lastName,
-                    emailAddress,
+                    emailAddress
+                },
+                contactInfo: {
                     servicePhone
                 }
             }
@@ -112,10 +114,12 @@ describe('contact-details-drawer', () => {
             const phoneNumber = '123-456-1234';
             const mainInitialState = {
                 order: {
-                    contactInfo: {
+                    customer: {
                         firstName,
                         lastName,
-                        emailAddress,
+                        emailAddress
+                    },
+                    contactInfo: {
                         phoneNumber
                     }
                 }

src/layouts/tpa-submit/tpa-submit.spec.js

@@ -388,10 +388,12 @@ describe('tpa-submit', () => {
                             companyName: providerCompanyName
                         }
                     },
-                    contactInfo: {
+                    customer: {
                         firstName,
                         lastName,
-                        emailAddress,
+                        emailAddress
+                    },
+                    contactInfo: {
                         servicePhone
                     }
                 }
@@ -433,10 +435,12 @@ describe('tpa-submit', () => {
                             companyName: providerCompanyName
                         }
                     },
-                    contactInfo: {
+                    customer: {
                         firstName,
                         lastName,
-                        emailAddress,
+                        emailAddress
+                    },
+                    contactInfo: {
                         servicePhone,
                         extension
                     }

src/store/index.js

@@ -191,9 +191,6 @@ export const getDefaultState = () => ({
             }
         },
         contactInfo: {
-            firstName: null,
-            lastName: null,
-            emailAddress: null,
             homePhone: null,
             alternativePhone: null,
             servicePhone: null,
@@ -358,10 +355,10 @@ export const useMainStore = defineStore({
             };
         },
         contactInfo: (s) => {
-            const obj = {
+            return {
-                firstName: s.order.contactInfo.firstName || s.order.customer.firstName,
+                firstName: s.order.customer.firstName,
-                lastName: s.order.contactInfo.lastName || s.order.customer.lastName,
+                lastName: s.order.customer.lastName,
-                emailAddress: s.order.contactInfo.emailAddress || s.order.customer.emailAddress,
+                emailAddress: s.order.customer.emailAddress,
                 homePhone: s.order.contactInfo.homePhone,
                 alternativePhone: s.order.contactInfo.alternativePhone,
                 servicePhone: s.order.contactInfo.servicePhone,
@@ -369,7 +366,6 @@ export const useMainStore = defineStore({
                 requestTextUpdates: s.order.contactInfo.requestTextUpdates ?? false,
                 notesForTechnician: s.order.contactInfo.notesForTechnician
             };
-            return obj;
         },
         scheduleDisplayText: (s) => {
             const dateModel = convertDateStringToDate(s.order.schedule.date);
@@ -1475,9 +1471,9 @@ export const useMainStore = defineStore({
                         state: customer.address?.state,
                         zipCode: customer.address?.zipCode?.toString()
                     },
-                    emailAddress: contactInfo.emailAddress || customer.emailAddress,
+                    emailAddress: customer.emailAddress,
-                    firstName: contactInfo.firstName || customer.firstName,
+                    firstName: customer.firstName,
-                    lastName: contactInfo.lastName || customer.lastName,
+                    lastName: customer.lastName,
                     homePhone: contactInfo.extension && contactInfo.homePhone ? contactInfo.homePhone + contactInfo.extension : contactInfo.homePhone,
                     servicePhone: contactInfo.servicePhone,
                     alternativePhone: contactInfo.alternativePhone,
@@ -1608,10 +1604,10 @@ export const useMainStore = defineStore({
                 order.customer.address.city = data.customer?.address?.city;
                 order.customer.address.state = data.customer?.address?.state;
                 order.customer.address.zipCode = data.customer?.address?.zipCode;
+                order.customer.firstName = data?.customer?.firstName;
+                order.customer.lastName = data?.customer?.lastName;
+                order.customer.emailAddress = data?.customer?.emailAddress;
 
-                order.contactInfo.firstName = data?.customer?.firstName;
-                order.contactInfo.lastName = data?.customer?.lastName;
-                order.contactInfo.emailAddress = data?.customer?.emailAddress;
                 order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
                 order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
                 order.contactInfo.servicePhone = data?.customer?.servicePhone;
@@ -1677,10 +1673,10 @@ export const useMainStore = defineStore({
                 order.customer.address.state = data.customer?.address?.state;
                 order.customer.address.zipCode = data.customer?.address?.zipCode;
                 order.customer.emailAddress = data.customer?.emailAddress;
+                order.customer.firstName = data?.customer?.firstName;
+                order.customer.lastName = data?.customer?.lastName;
+                order.customer.emailAddress = data?.customer?.emailAddress;
 
-                order.contactInfo.firstName = data?.customer?.firstName;
-                order.contactInfo.lastName = data?.customer?.lastName;
-                order.contactInfo.emailAddress = data?.customer?.emailAddress;
                 order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
                 order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
                 order.contactInfo.servicePhone = data?.customer?.servicePhone;
@@ -2121,9 +2117,6 @@ export const useMainStore = defineStore({
         },
 
         resetContactInfo() {
-            this.order.contactInfo.firstName = null;
-            this.order.contactInfo.lastName = null;
-            this.order.contactInfo.emailAddress = null;
             this.order.contactInfo.homePhone = null;
             this.order.contactInfo.alternativePhone = null;
             this.order.contactInfo.servicePhone = null;
@@ -2607,9 +2600,10 @@ export const useMainStore = defineStore({
         },
 
         updateContactInfo(contactInfo) {
-            this.order.contactInfo.firstName = contactInfo?.firstName ?? '';
+            this.order.customer.firstName = contactInfo?.firstName ?? this.order.customer.firstName;
-            this.order.contactInfo.lastName = contactInfo?.lastName ?? '';
+            this.order.customer.lastName = contactInfo?.lastName ?? this.order.customer.lastName;
-            this.order.contactInfo.emailAddress = contactInfo?.emailAddress ?? '';
+            this.order.customer.emailAddress = contactInfo?.emailAddress ?? this.order.customer.emailAddress;
+
             this.order.contactInfo.requestTextUpdates = contactInfo?.requestTextUpdates ?? false;
             this.order.contactInfo.notesForTechnician = contactInfo?.notesForTechnician ?? '';
         },

src/store/store.spec.js

@@ -486,7 +486,7 @@ describe('Store', () => {
             // Arrange
             const firstName = getRandomString(4, 10);
             const lastName = getRandomString(5, 15);
-            const emailAddress = false;
+            const emailAddress = getRandomString(5, 15);
             const requestTextUpdates = getRandomBoolean();
             const notesForTechnician = getRandomString(50, 150);
 
@@ -525,14 +525,14 @@ describe('Store', () => {
             expect(store.contactInfo.alternativePhone).toEqual(altPhone);
             expect(store.contactInfo.extension).toEqual(extension);
         });
-        it('All null values => contact info set in store to all nulls', () => {
+        it('All null values => contact info set in store to all null/default', () => {
             // Act
             store.updateContactInfo({});
 
             // Assert
-            expect(store.contactInfo.firstName).toEqual('');
+            expect(store.contactInfo.firstName).toEqual(null);
-            expect(store.contactInfo.lastName).toEqual('');
+            expect(store.contactInfo.lastName).toEqual(null);
-            expect(store.contactInfo.emailAddress).toEqual('');
+            expect(store.contactInfo.emailAddress).toEqual(null);
             expect(store.contactInfo.requestTextUpdates).toEqual(false);
             expect(store.contactInfo.notesForTechnician).toEqual('');
         });
@@ -754,13 +754,13 @@ describe('Store', () => {
                 const contactServicePhone = getRandomString(6, 6);
                 const contactAlternativePhone = getRandomString(6, 6);
                 const requestTextUpdates = getRandomBoolean();
-                store.order.contactInfo.firstName = contactFirstName;
-                store.order.contactInfo.lastName = contactLastName;
-                store.order.contactInfo.emailAddress = contactEmail;
                 store.order.contactInfo.homePhone = contactHomePhone;
                 store.order.contactInfo.servicePhone = contactServicePhone;
                 store.order.contactInfo.alternativePhone = contactAlternativePhone;
                 store.order.contactInfo.requestTextUpdates = requestTextUpdates;
+                store.order.customer.firstName = contactFirstName;
+                store.order.customer.lastName = contactLastName;
+                store.order.customer.emailAddress = contactEmail;
                 store.order.customer.address.streetAddress = streetAddress;
                 store.order.customer.address.streetAddress2 = streetAddress2;
                 store.order.customer.address.city = city;

src/ux-components/alert/alert.vue

@@ -54,12 +54,13 @@
                 <button
                     v-if="isDismissible"
                     type="button"
-                    class="btn-close p-2"
+                    class="btn-dismiss"
                     data-bs-dismiss="alert"
                     aria-label="Close">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 23.7 23.7"
+                        class="btn-dismiss-icon"
                         xml:space="preserve">
                         <path
                             d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581
@@ -299,18 +300,22 @@ export default {
             transform: none;
         }
     }
+    .btn-dismiss {
+        display: flex;
+        border: none;
+        background: none;
+        min-width: 1rem;
+        max-height: 1rem;
+        padding: 0;
+    }
+    .btn-dismiss-icon {
+        height: 100%;
+        width: 100%;
+    }
     a {
         font-weight: $font-weight-normal;
     }
     border-color: transparent;
-    .btn-close {
-        background: none;
-        opacity: 1;
-        width: 0.75rem;
-        height: 0.75rem;
-        top: 2px;
-        right: 2px;
-    }
     .alert-body {
         margin: 0 1rem;
         padding: .5rem 1rem .75rem 1rem;