jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/kroell/coverage-statement-fix

Browse source
This commit is contained in:
Katie Kroell 2026-02-06 09:34:31 -05:00
commit c376411287
22 changed files with 614 additions and 599 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/constants/progress-bar-mapper.js
View file

@ -53,10 +53,10 @@ export const pageProgressMapper = {
'schedule-page': {
percent: 70
},
'contact-details': {
percent: 80
},
'service-packages': {
percent: 75
},
'contact-details': {
percent: 85
},
'payment-method': {

2
src/digital-components/button-question/button-question.vue
View file

@ -79,7 +79,7 @@
</fieldset>
</div>
<div
v-if="!suppressError"
v-if="!suppressError && errorMessage"
class="row form-test-error mt-1">
<error-message :name="formatString(groupName)"></error-message>
</div>

2
src/digital-components/textarea-question/textarea-question.spec.js
View file

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

45
src/digital-components/textarea-question/textarea-question.vue
View file

@ -18,7 +18,7 @@
:id="inputId"
:ref="inputId"
v-model.trim="value"
class="form-control"
class="textarea-input"
:name="inputId"
:rows="[inputRows ?? 10]"
:placeholder="placeholderText"
@ -32,8 +32,15 @@
@drop="trimOnPaste">
</textarea>
</div>
<p class="character-count margin-top-8">
{{ maxLength - characterCount }}/{{ maxLength }} characters remaining
<p
v-if="characterCount == 0"
class="character-count">
{{ maxLength }} characters allowed
</p>
<p
v-else
class="character-count">
{{ maxLength - characterCount }} characters left
</p>
<div
v-show="errorMessage"
@ -103,7 +110,7 @@ export default {
computed: {
/**
* @summary Returns the number of characters in the textarea field.
* @returns {number}
* @returns {number} The number of characters.
*/
characterCount() {
return this?.modelValue?.length ?? 0;
@ -155,19 +162,18 @@ export default {
font-weight: 500;
}
.form-control {
max-height: 30rem;
border: $border-input;
border-radius: $border-radius;
padding: 12px 16px;
.textarea-input {
padding: .625rem;
resize: none;
margin-bottom: .625rem;
width: 100%;
letter-spacing: inherit;
box-shadow: $box-shadow-input;
font-family: inherit;
font-size: inherit;
line-height: 1.375rem;
&::placeholder {
color: $gray-500;
}
&:focus {
border: $border-input-focus;
}
&:disabled,
&.disabled {
background-color: $gray-100;
@ -176,16 +182,13 @@ export default {
}
.optional {
color: $gray-550;
font-weight: $font-weight-normal;
color: $darker-gray;
}
.character-count {
color: $gray-600;
font-size: 12px;
margin-bottom: 0px;
}
.margin-top-8 {
margin-top: 8px;
color: #4d4e53;
font-size: 1rem;
line-height: 1.375rem;
}
</style>

516
src/layouts/contact-details/contact-details.spec.js
View file

@ -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());
// Act
const lastNameQuestion = wrapper.findComponent({ ref: 'lastNameQuestion' });
// Assert
expect(lastNameQuestion.exists()).toBe(true);
});
test('Should render email question subcomponent', () => {
// Arrange
const wrapper = shallowMount(contactDetails, getMountOptions());
// Act
const emailQuestion = wrapper.findComponent({ ref: 'emailQuestion' });
// Assert
expect(emailQuestion.exists()).toBe(true);
});
test('Should render phone number question subcomponent', () => {
// Arrange
const wrapper = shallowMount(contactDetails, getMountOptions());
// Act
const phoneNumberQuestion = wrapper.findComponent({ ref: 'phoneNumberQuestion' });
// Assert
expect(phoneNumberQuestion.exists()).toBe(true);
});
test('Should render text updates checkbox subcomponent', () => {
// Arrange
const checkboxLabel = getRandomString(50, 100);
const mockMixin = {
methods: {
getCmsContent: jest.fn().mockImplementation(() => checkboxLabel),
setCmsContent: jest.fn()
const mountOptions = getMountOptions();
const customerStreetAddress = getRandomString(10, 50);
const customerStreetAddress2 = getRandomString(0, 50);
const customerCity = getRandomString(4, 20);
const customerState = getRandomString(2, 2);
const serviceStreetAddress = getRandomString(10, 50);
const serviceStreetAddress2 = getRandomString(0, 50);
const serviceCity = getRandomString(4, 20);
const serviceState = getRandomString(2, 2);
const zipCode = getRandomInt(10000, 99999).toString();
const mainInitialState = {
order: {
customer: {
address: {
streetAddress: customerStreetAddress,
streetAddress2: customerStreetAddress2,
city: customerCity,
state: customerState,
zipCode
}
},
serviceLocation: {
streetAddress: serviceStreetAddress,
streetAddress2: serviceStreetAddress2,
city: serviceCity,
state: serviceState,
zipCode
}
}
};
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(wrapper.vm.requestTextUpdatesCheckboxText).toBe(`${checkboxLabel}*`);
expect(sameAsPolicyAddressQuestion.exists()).toBe(false);
});
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', () => {
// 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', () => {
test('Should render clearance text subcomponent', () => {
// 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);
});
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);
expect(clearanceText.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 lastName = getRandomString(4, 15);
const emailAddress = getRandomString(10, 20);
const servicePhone = getRandomInt(1000000000, 9999999999).toString();
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 notesForTechnician = getRandomString(1, 100);
const isVehicleProtected = getRandomBoolean();
const mainInitialState = {
order: {
customer: {
firstName,
lastName,
emailAddress
serviceLocation: {
address,
address2,
city,
state,
zipCode,
isVehicleProtected
},
contactInfo: {
servicePhone
notesForTechnician
}
}
};
mountOptions.global = {
plugins: [createTestingPinia({
initialState: {
main: mainInitialState
}
})]
};
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);
expect(wrapper.vm.address).toBe(address);
expect(wrapper.vm.address2).toBe(address2);
expect(wrapper.vm.city).toBe(city);
expect(wrapper.vm.state).toBe(state);
expect(wrapper.vm.zipCode).toBe(zipCode);
expect(wrapper.vm.isVehicleProtected).toBe(isVehicleProtected);
expect(wrapper.vm.notesForTechnician).toBe(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(wrapper.vm.$router.navigate)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, undefined);
expect(useMainStore().updateServiceLocation).toHaveBeenCalledWith({
address,
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);
});
});

331
src/layouts/contact-details/contact-details.vue
View file

@ -15,81 +15,92 @@
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-4"
class="subheader"
:cmsWidgetName="widget.siteSubHeader" />
<textboxQuestion
ref="firstNameQuestion"
v-model="firstName"
class="mt-5"
inputId="firstName"
:cmsWidgetName="widget.firstNameQuestion"
isRequired
:validationRules="rules.firstName" />
<textboxQuestion
ref="lastNameQuestion"
v-model="lastName"
class="mt-5"
inputId="lastName"
:cmsWidgetName="widget.lastNameQuestion"
isRequired
:validationRules="rules.lastName" />
<textboxQuestion
ref="emailQuestion"
v-model="emailAddress"
class="mt-5"
inputId="emailAddress"
:cmsWidgetName="widget.emailQuestion"
isRequired
:validationRules="rules.emailAddress" />
<textboxQuestion
ref="phoneNumberQuestion"
v-model="phoneNumber"
class="mt-5"
inputId="phoneNumber"
:cmsWidgetName="widget.phoneNumberQuestion"
isRequired
:mask="phoneMask"
:validationRules="rules.phoneNumber" />
<!-- TO DO: Use MSR appointment information for MSR -->
<alert
ref="appointmentInformationAlert"
isCollapsible
alertClass="alert-warning"
:cmsWidgetName="widget.appointmentInformation" />
<checkbox
ref="requestTextUpdatesCheckbox"
v-model="requestTextUpdates"
:isChecked="requestTextUpdates"
class="mt-3"
checkboxName="requestTextUpdates"
buttonID="requestTextUpdates"
:checkboxLabel="requestTextUpdatesCheckboxText" />
v-if="showSameAsPolicyAddressQuestion"
ref="sameAsPolicyAddressQuestion"
v-model="isSameAsPolicyAddress"
checkboxName="sameAsPolicyAddress"
buttonID="sameAsPolicyAddress"
class="form-group same-address-checkbox"
:checkboxLabel="sameAsPolicyAddressQuestionText" />
<textboxQuestion
ref="addressQuestion"
v-model="address"
inputId="address"
class="form-group"
:cmsWidgetName="widget.streetAddressQuestion"
isRequired
:validationRules="'street-address-required'" />
<textboxQuestion
ref="address2Question"
v-model="address2"
inputId="address2"
class="form-group"
:cmsWidgetName="widget.apartmentQuestion" />
<textboxQuestion
ref="cityQuestion"
v-model="city"
inputId="city"
class="form-group"
:cmsWidgetName="widget.cityQuestion"
isRequired
:validationRules="'city-required'" />
<dropdownQuestion
ref="stateQuestion"
v-model="state"
inputId="state"
class="form-group"
:cmsWidgetName="widget.stateQuestion"
:options="states"
isDisabled />
<textboxQuestion
ref="zipCodeQuestion"
v-model="zipCode"
inputId="zipCode"
class="form-group"
:cmsWidgetName="widget.zipCodeQuestion"
isDisabled />
<alert
ref="changeZipCodeAlert"
class="zip-alert"
isCollapsible
alertClass="alert-warning"
:startCollapsed="true"
:cmsWidgetName="widget.changeZipCodeAlert" />
<buttonQuestion
ref="vehicleProtectedQuestion"
v-model="isVehicleProtected"
inputId="vehicleProtected"
class="form-group"
isRequired
groupName="vehicleProtectedQuestion"
:questionText="vehicleProtectedQuestionText"
:answers="vehicleProtectedQuestionAnswers"
:buttonTypeString="'listButtonHorizontal'" />
<textBlock
ref="clearanceText"
class="clearance-text"
:cmsWidgetName="widget.clearanceText" />
<textareaQuestion
ref="notesQuestion"
v-model="notesForTechnician"
class="mt-5"
inputId="technicianNotes"
class="form-group"
:isDisabled="false"
:isRequired="false"
:cmsWidgetName="widget.notesQuestion"
maxLength="250"
maxLength="150"
:inputRows="4" />
<p
ref="disclaimerText"
class="caption dark-gray mt-5">
{{ textUpdateDisclaimerText }} I also agree to
Safelite's
<textLink
ref="privacyPolicyLink"
class="normal-line-height"
linkType="newWindowLink"
text="Privacy Policy"
href="//www.safelite.com/privacy-center" />
and
<textLink
ref="termsOfUseLink"
class="normal-line-height"
linkType="newWindowLink"
text="Terms of Use"
href="//www.safelite.com/terms-of-use" />.
</p>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@ -107,15 +118,25 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import checkbox from '@/ux-components/checkbox/checkbox.vue';
import textareaQuestion from '@/digital-components/textarea-question/textarea-question.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import alert from '@/ux-components/alert/alert.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
import { Form } from 'vee-validate';
import { defineRule, Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store/index.js';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';
import errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules';
import widgetFields from '@/constants/cms-widget-fields';
import states from '@/constants/states';
// DEFINE VALIDATION RULES
defineRule('street-address-required', required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule('city-required', required(errorMessages.CITY_REQUIRED));
export default {
name: 'contact-details',
@ -128,7 +149,10 @@ export default {
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
textLink
alert,
buttonQuestion,
dropdownQuestion,
textBlock
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -140,58 +164,70 @@ export default {
},
data() {
const {
firstName,
lastName,
emailAddress,
servicePhone,
requestTextUpdates,
notesForTechnician
} = useMainStore().contactInfo;
const {
address,
address2,
city,
state,
zipCode,
isVehicleProtected
} = useMainStore().serviceLocation;
return {
firstName,
lastName,
emailAddress,
phoneNumber: servicePhone,
requestTextUpdates,
notesForTechnician,
address,
address2,
city,
state,
zipCode,
isVehicleProtected: isVehicleProtected ?? '',
isSameAsPolicyAddress: false,
widget: {
siteHeader: 'SiteHeaderWidget',
siteSubHeader: 'SiteSubHeaderWidget',
firstNameQuestion: 'FirstNameQuestionWidget',
lastNameQuestion: 'LastNameQuestionWidget',
appointmentInformation: 'AppointmentInformationAlertWidget',
MSRAppointmentInformation: 'MSRAppointmentInformationAlertWidget',
sameAsPolicyAddressQuestion: 'SameAsPolicyAddressQuestionWidget',
streetAddressQuestion: 'StreetAddressQuestionWidget',
apartmentQuestion: 'ApartmentQuestionWidget',
emailQuestion: 'EmailQuestionWidget',
phoneNumberQuestion: 'PhoneNumberQuestionWidget',
requestTextUpdates: 'TextContentWidget',
cityQuestion: 'CityQuestionWidget',
stateQuestion: 'StateQuestionWidget',
zipCodeQuestion: 'ZipCodeQuestionWidget',
changeZipCodeAlert: 'ChangeZipCodeAlertWidget',
vehicleProtectedQuestion: 'VehicleProtectedQuestionWidget',
clearanceText: 'ClearanceTextWidget',
notesQuestion: 'NotesQuestionWidget',
disclaimer: 'TextUpdateDisclaimerWidget',
siteFooter: 'SiteFooterWidget'
},
rules: {
firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED,
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
}
states
};
},
computed: {
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
requestTextUpdatesCheckboxText() {
return `${this.getCmsContent(
this.widget.requestTextUpdates,
'Text'
)}*`;
},
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
textUpdateDisclaimerText() {
return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
},
showSameAsPolicyAddressQuestion() {
return this.zipCode === useMainStore().customerData.addressQuestions.zipCode;
},
sameAsPolicyAddressQuestionText() {
return this.getCmsContent(this.widget.sameAsPolicyAddressQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
},
vehicleProtectedQuestionText() {
return this.getCmsContent(this.widget.vehicleProtectedQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
},
vehicleProtectedQuestionAnswers() {
return this.getCmsContent(this.widget.vehicleProtectedQuestion, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS) || [];
}
},
watch: {
isSameAsPolicyAddress(newValue) {
if (newValue) {
this.copyPolicyAddressToServiceLocation();
} else {
this.clearAddressFields();
}
}
},
methods: {
@ -200,34 +236,29 @@ export default {
*/
forwardButtonAction() {
const contactInfo = {
firstName: this.firstName,
lastName: this.lastName,
emailAddress: this.emailAddress,
requestTextUpdates: this.requestTextUpdates,
notesForTechnician: this.notesForTechnician
};
useMainStore().updateContactInfo(contactInfo);
if (this.requestTextUpdates) {
useMainStore().updatePhoneNumbers({
service: this.phoneNumber,
alternative: this.phoneNumber
});
} else {
useMainStore().updatePhoneNumbers({
home: this.phoneNumber,
service: this.phoneNumber
});
}
useMainStore().updateServiceLocation({
address: this.address,
address2: this.address2,
city: this.city,
isVehicleProtected: this.isVehicleProtected || 'false'
});
const scenario =
useMainStore().order.serviceLocation.IsSafeliteProvider
=== false
? this.navigationScenarios
.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
: this.navigationScenarios
.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
this.$router.navigate(scenario, this.$route);
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
copyPolicyAddressToServiceLocation() {
const { addressQuestions } = useMainStore().customerData;
this.address = addressQuestions.streetAddress;
this.address2 = addressQuestions.streetAddress2;
this.city = addressQuestions.city;
},
clearAddressFields() {
this.address = '';
this.address2 = '';
this.city = '';
}
}
};
@ -242,12 +273,48 @@ export default {
padding-right: .9375rem;
}
}
.dark-gray {
color: $darker-gray;
.zip-alert {
:deep(a) {
padding: 0;
border-bottom: 1.5px solid #125b7e;
color: #125b7e;
&:hover, &:focus {
border-color: transparent;
color: $heritage-blue-secondary;
text-decoration: none;
}
}
}
.normal-line-height {
line-height: normal;
.textbox-question {
:deep(.form-label:has(strong)) {
font-weight: $font-weight-normal;
color: $darker-gray;
strong {
font-weight: 600;
color: $black;
}
}
}
.subheader {
margin: 1.25rem 0;
}
.form-group {
margin-bottom: 1.25rem;
}
.same-address-checkbox {
:deep(.form-check-input) {
&:checked + label p,
& + label p {
font-size: 1rem;
font-weight: $font-weight-normal;
color: $darker-gray;
}
}
}
.clearance-text {
font-size: .875rem;
line-height: 1.25rem;
margin-top: 0rem;
margin-bottom: .3125rem;
}
</style>

15
src/layouts/order-confirmation/order-confirmation.spec.js
View file

@ -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,

2
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -373,7 +373,7 @@ export default {
);
// Contact Info
const { contactInfo } = useMainStore().order;
const { contactInfo } = useMainStore();
const contactInfoReqs = !!(
contactInfo.firstName
&& contactInfo.lastName

2
src/layouts/part-questions/part-questions.vue
View file

@ -30,6 +30,8 @@ import { Form } from 'vee-validate';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import globalRules from '@/constants/global-rules';
import bailoutMessage from '@/constants/bailoutMessage';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
export default {
name: 'part-questions',

13
src/layouts/payment-method/payment-method.vue
View file

@ -52,7 +52,7 @@
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isStackedVertically="true"
@backClicked="navigateBack"
@backClicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
@ -230,7 +230,7 @@ export default {
const customerReqs = !!(firstName && lastName && emailAddress);
// Contact Info
const { contactInfo } = useMainStore().order;
const { contactInfo } = useMainStore();
const contactInfoReqs = !!(
contactInfo.firstName
&& contactInfo.lastName
@ -291,6 +291,15 @@ export default {
{ [routerParams.SKIP_SAVE_SESSION]: true }
);
}
},
backButtonAction() {
const scenario = this.mainStore.isMobileAppointment
? this.navigationScenarios.CLICKED_BACK_MOBILE
: this.navigationScenarios.CLICKED_BACK_INSHOP;
this.$router.navigate(
scenario,
this.$route
);
}
}
};

2
src/layouts/payment-method/review-dropdown/review-dropdown.vue
View file

@ -92,7 +92,7 @@ export default {
return useMainStore().order.serviceLocation.appointmentType;
},
customerInfo() {
return useMainStore().order.contactInfo;
return useMainStore().contactInfo;
}
},
methods: {

6
src/layouts/payment-page/payment-page.spec.js
View file

@ -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: {

10
src/layouts/payment-page/payment-page.vue
View file

@ -479,15 +479,15 @@ export default {
authSignature: '',
authSignatureStart: '',
referralSequenceNumber: useMainStore().order.referralSequenceNumber,
emailAddress: useMainStore().order.contactInfo.emailAddress,
emailAddress: useMainStore().contactInfo.emailAddress,
address1: this.getAddress1(),
address2: this.getAddress2(),
city: this.getCity(),
state: this.getState(),
zipCode: this.getZipCode(),
firstName: useMainStore().order.contactInfo.firstName,
lastName: useMainStore().order.contactInfo.lastName,
phoneNumber: useMainStore().order.contactInfo.servicePhone,
firstName: useMainStore().contactInfo.firstName,
lastName: useMainStore().contactInfo.lastName,
phoneNumber: useMainStore().contactInfo.servicePhone,
ctu: useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu ?? useMainStore().order.serviceLocation.zipCodeCtu,
referralCorrelationId: useMainStore().order.referralCorrelationId,
workOrderNumber: this.getWorkOrderNumber(),
@ -593,7 +593,7 @@ export default {
);
// Contact Info
const { contactInfo } = useMainStore().order;
const { contactInfo } = useMainStore();
const contactInfoReqs = !!(
contactInfo.firstName
&& contactInfo.lastName

12
src/layouts/schedule-page/service-location/service-location.vue
View file

@ -372,9 +372,6 @@ export default {
}
this.mainStore.saveServiceLocation({
address: this.streetAddress,
address2: this.streetAddress2,
city: this.city,
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
@ -417,6 +414,7 @@ export default {
this.zipCode = newZip;
const zipCodeData = await getZipCodeData(this.zipCode);
this.city = zipCodeData.city;
this.state = zipCodeData.state;
this.setCtuForMobile(zipCodeData.zipCodeCtu);
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
@ -454,6 +452,7 @@ export default {
this.zipContainsMilitaryBase = initialData.zipCodeData.containsMilitaryBase;
this.zipCodeCtu = initialData.zipCodeData.zipCodeCtu;
this.city = initialData.zipCodeData.city;
this.state = initialData.zipCodeData.state;
}
if (initialData.serviceabilityDetails) {
@ -523,6 +522,7 @@ export default {
this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
} else {
this.city = zipCodeData.city;
this.state = zipCodeData.state;
this.zipCode = this.mobileZipCode;
this.setCtuForMobile(zipCodeData.zipCodeCtu);
this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
@ -601,12 +601,6 @@ $page-side-padding: 1.5rem;
div.alert {
margin-top: 0.625rem;
:deep(.alert-header) {
button.btn-collapse {
display: block;
}
}
button.looka-likea-link {
background: none;
border: none;

6
src/layouts/service-packages/service-packages.vue
View file

@ -195,8 +195,12 @@ export default {
}
store.updateVaps(this.selectedVaps);
const scenario = store.isMobileAppointment
? this.navigationScenarios.CLICKED_FORWARD_MOBILE
: this.navigationScenarios.CLICKED_FORWARD_INSHOP;
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
scenario,
this.$route
);
}

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

@ -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
}
}

12
src/layouts/tpa-submit/tpa-submit.spec.js
View file

@ -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
}

6
src/router/router-constants/navigation-scenarios.js
View file

@ -90,6 +90,10 @@ const navigationScenarios = Object.freeze({
CLICKED_FORWARD_WITH_TPA_DISABLED: 'CLICKED_FORWARD_WITH_TPA_DISABLED',
CLICKED_FORWARD_WITH_POLICY_AND_VEHICLES: 'CLICKED_FORWARD_WITH_POLICY_AND_VEHICLES',
// Service Package
CLICKED_FORWARD_INSHOP: 'CLICKED_FORWARD_INSHOP',
CLICKED_FORWARD_MOBILE: 'CLICKED_FORWARD_MOBILE',
// Review Page
CLICKED_CUSTOMER_EDIT: 'CLICKED_CUSTOMER_EDIT',
CLICKED_DAMAGE_EDIT: 'CLICKED_DAMAGE_EDIT',
@ -99,6 +103,8 @@ const navigationScenarios = Object.freeze({
CLICKED_VEHICLE_EDIT: 'CLICKED_VEHICLE_EDIT',
// Payment
CLICKED_BACK_INSHOP: 'CLICKED_BACK_INSHOP',
CLICKED_BACK_MOBILE: 'CLICKED_BACK_MOBILE',
CLICKED_PAY_NOW: 'CLICKED_PAY_NOW',
PAY_IN_ADVANCE_ERROR: 'PAY_IN_ADVANCE_ERROR',
PAY_IN_ADVANCE_CREDIT_CARD_ERROR: 'PAY_IN_ADVANCE_CREDIT_CARD_ERROR',

24
src/router/router-constants/routing-table.js
View file

@ -608,7 +608,7 @@ const routingTable = () => [
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.CONTACT_DETAILS
destinationIssPageValue: issPageValues.SERVICE_PACKAGES
}
]
},
@ -620,12 +620,8 @@ const routingTable = () => [
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP,
destinationIssPageValue: issPageValues.SERVICE_PACKAGES
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP,
destinationIssPageValue: issPageValues.TPA_SUBMIT
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.PAYMENT_METHOD
}
]
},
@ -634,11 +630,15 @@ const routingTable = () => [
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.CONTACT_DETAILS
destinationIssPageValue: issPageValues.SCHEDULE_PAGE
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
scenario: navigationScenarios.CLICKED_FORWARD_INSHOP,
destinationIssPageValue: issPageValues.PAYMENT_METHOD
},
{
scenario: navigationScenarios.CLICKED_FORWARD_MOBILE,
destinationIssPageValue: issPageValues.CONTACT_DETAILS
}
]
},
@ -646,9 +646,13 @@ const routingTable = () => [
issPageValue: issPageValues.PAYMENT_METHOD,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
scenario: navigationScenarios.CLICKED_BACK_INSHOP,
destinationIssPageValue: issPageValues.SERVICE_PACKAGES
},
{
scenario: navigationScenarios.CLICKED_BACK_MOBILE,
destinationIssPageValue: issPageValues.CONTACT_DETAILS
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.ORDER_CONFIRMATION

80
src/store/index.js
View file

@ -191,9 +191,6 @@ export const getDefaultState = () => ({
}
},
contactInfo: {
firstName: null,
lastName: null,
emailAddress: null,
homePhone: null,
alternativePhone: null,
servicePhone: null,
@ -358,9 +355,9 @@ export const useMainStore = defineStore({
};
},
contactInfo: (s) => ({
firstName: s.order.contactInfo.firstName ?? s.order.customer.firstName,
lastName: s.order.contactInfo.lastName ?? s.order.customer.lastName,
emailAddress: s.order.contactInfo.emailAddress ?? s.order.customer.emailAddress,
firstName: s.order.customer.firstName,
lastName: s.order.customer.lastName,
emailAddress: s.order.customer.emailAddress,
homePhone: s.order.contactInfo.homePhone,
alternativePhone: s.order.contactInfo.alternativePhone,
servicePhone: s.order.contactInfo.servicePhone,
@ -1472,9 +1469,9 @@ export const useMainStore = defineStore({
state: customer.address?.state,
zipCode: customer.address?.zipCode?.toString()
},
emailAddress: contactInfo.emailAddress || customer.emailAddress,
firstName: contactInfo.firstName || customer.firstName,
lastName: contactInfo.lastName || customer.lastName,
emailAddress: customer.emailAddress,
firstName: customer.firstName,
lastName: customer.lastName,
homePhone: contactInfo.extension && contactInfo.homePhone ? contactInfo.homePhone + contactInfo.extension : contactInfo.homePhone,
servicePhone: contactInfo.servicePhone,
alternativePhone: contactInfo.alternativePhone,
@ -1605,10 +1602,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;
@ -1673,11 +1670,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.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;
@ -1823,27 +1819,29 @@ export const useMainStore = defineStore({
this.order.vehicle.registration.lastName = registrationInfo?.lastName;
},
updateServiceLocation(serviceLocationInfo) {
this.order.serviceLocation.address = serviceLocationInfo.address;
this.order.serviceLocation.address2 = serviceLocationInfo.address2;
this.order.serviceLocation.city = serviceLocationInfo.city;
this.order.serviceLocation.state = serviceLocationInfo.state;
this.order.serviceLocation.zipCode = serviceLocationInfo.zipCode;
this.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu;
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType;
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected;
this.order.serviceLocation.address = serviceLocationInfo.address ?? this.order.serviceLocation.address;
this.order.serviceLocation.address2 = serviceLocationInfo.address2 ?? this.order.serviceLocation.address2;
this.order.serviceLocation.city = serviceLocationInfo.city ?? this.order.serviceLocation.city;
this.order.serviceLocation.state = serviceLocationInfo.state ?? this.order.serviceLocation.state;
this.order.serviceLocation.zipCode = serviceLocationInfo.zipCode ?? this.order.serviceLocation.zipCode;
this.order.serviceLocation.zipCodeCtu = serviceLocationInfo.zipCodeCtu ?? this.order.serviceLocation.zipCodeCtu;
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType ?? this.order.serviceLocation.appointmentType;
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected ?? this.order.serviceLocation.isVehicleProtected;
this.order.serviceLocation.provider = {
providerNumber: serviceLocationInfo.provider?.providerNumber,
address: {
streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
city: serviceLocationInfo.provider?.address?.city,
state: serviceLocationInfo.provider?.address?.state,
zipCode: serviceLocationInfo.provider?.address?.zipCode,
zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
},
companyName: serviceLocationInfo.provider?.companyName,
phoneNumber: serviceLocationInfo.provider?.phoneNumber
};
if (serviceLocationInfo.provider) {
this.order.serviceLocation.provider = {
providerNumber: serviceLocationInfo.provider?.providerNumber,
address: {
streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
city: serviceLocationInfo.provider?.address?.city,
state: serviceLocationInfo.provider?.address?.state,
zipCode: serviceLocationInfo.provider?.address?.zipCode,
zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
},
companyName: serviceLocationInfo.provider?.companyName,
phoneNumber: serviceLocationInfo.provider?.phoneNumber
};
}
this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter;
},
@ -2116,9 +2114,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;
@ -2602,9 +2597,10 @@ export const useMainStore = defineStore({
},
updateContactInfo(contactInfo) {
this.order.contactInfo.firstName = contactInfo?.firstName ?? '';
this.order.contactInfo.lastName = contactInfo?.lastName ?? '';
this.order.contactInfo.emailAddress = contactInfo?.emailAddress ?? '';
this.order.customer.firstName = contactInfo?.firstName ?? this.order.customer.firstName;
this.order.customer.lastName = contactInfo?.lastName ?? this.order.customer.lastName;
this.order.customer.emailAddress = contactInfo?.emailAddress ?? this.order.customer.emailAddress;
this.order.contactInfo.requestTextUpdates = contactInfo?.requestTextUpdates ?? false;
this.order.contactInfo.notesForTechnician = contactInfo?.notesForTechnician ?? '';
},

16
src/store/store.spec.js
View file

@ -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.lastName).toEqual('');
expect(store.contactInfo.emailAddress).toEqual('');
expect(store.contactInfo.firstName).toEqual(null);
expect(store.contactInfo.lastName).toEqual(null);
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;

93
src/ux-components/alert/alert.vue
View file

@ -31,41 +31,44 @@
<slot name="headline-line-two"></slot>
</div>
</template>
<button
v-if="isCollapsible"
class="btn-collapse"
type="button"
@click="toggleCollapse">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="9"
viewBox="0 0 15 9"
class="btn-collapse-icon"
:class="{ 'rotated': !collapsed }">
<path
fill-rule="nonzero"
d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
0 0 0 7.5 0" />
</svg>
</button>
<button
v-if="isDismissible"
type="button"
class="btn-close p-2"
data-bs-dismiss="alert"
aria-label="Close">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 23.7 23.7"
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
1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
</svg>
</button>
<div class="alert-icon-container">
<button
v-if="isCollapsible"
class="btn-collapse"
type="button"
@click="toggleCollapse">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="9"
viewBox="0 0 15 9"
class="btn-collapse-icon"
:class="{ 'rotated': !collapsed }">
<path
fill-rule="nonzero"
d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
0 0 0 7.5 0" />
</svg>
</button>
<button
v-if="isDismissible"
type="button"
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
1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
</svg>
</button>
</div>
</div>
<div
v-show="alertCopy"
@ -297,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;