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

Merge pull request #1857 from Safelite/feature/CSR-2065

Browse source 
Feature/csr 2065
This commit is contained in:
Leah Schumann 2024-05-21 08:06:20 -04:00 committed by GitHub
commit f406e36e59
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 289 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -174,7 +174,7 @@ export default {
}, },
methods: { methods: {
focusSearchInput() { focusSearchInput() {
//Focus cursor in input when search icon is clicked // Focus cursor in input when search icon is clicked
const field = document.querySelector("input"); const field = document.querySelector("input");
field.focus(); field.focus();
}, },

283
src/fmg-components/address-questions/address-questions.spec.js
View file

@ -15,6 +15,9 @@ describe("address-questions.vue", () => {
autocompleteElement = document.createElement("input"); autocompleteElement = document.createElement("input");
autocompleteElement.getPlace = jest.fn(); autocompleteElement.getPlace = jest.fn();
document.getElementById = jest.fn().mockReturnValue(autocompleteElement); document.getElementById = jest.fn().mockReturnValue(autocompleteElement);
document.getElementsByClassName = jest
.fn()
.mockReturnValue([document.createElement("div")]);
}); });
describe("initial state", () => { describe("initial state", () => {
@ -199,25 +202,29 @@ describe("address-questions.vue", () => {
expect(wrapper.vm.$loadScript).not.toHaveBeenCalled(); expect(wrapper.vm.$loadScript).not.toHaveBeenCalled();
}); });
test("address field is focused => disable autofill", async () => { test("address field is typed into => disable autofill", async () => {
// Arrange // Arrange
let focusEventCallbackFunction; let keydownEventCallbackFunction;
autocompleteElement.addEventListener = jest autocompleteElement.addEventListener = jest
.fn() .fn()
.mockImplementation((eventName, callbackFunction) => { .mockImplementation((eventName, callbackFunction) => {
if (eventName == "focus") { if (eventName == "keydown") {
focusEventCallbackFunction = callbackFunction; keydownEventCallbackFunction = callbackFunction;
} }
}); });
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
const e = {
code: "Enter",
};
// Act // Act
focusEventCallbackFunction(); keydownEventCallbackFunction(e);
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
// Assert // Assert
expect(autocompleteElement.getAttribute("autocomplete")).toEqual("do-not-autofill"); expect(autocompleteElement.getAttribute("autocomplete")).toEqual("new-password");
}); });
test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => { test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => {
@ -289,100 +296,104 @@ describe("address-questions.vue", () => {
}); });
}); });
test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => { // test("street address is entered, but user clicks away => first result is selected and other fields are filled in", async () => {
// Arrange // // Arrange
let changeEventCallbackFunction; // let changeEventCallbackFunction;
autocompleteElement.addEventListener = jest // autocompleteElement.addEventListener = jest
.fn() // .fn()
.mockImplementation((eventName, callbackFunction) => { // .mockImplementation((eventName, callbackFunction) => {
if (eventName == "change") { // if (eventName == "change") {
changeEventCallbackFunction = callbackFunction; // changeEventCallbackFunction = callbackFunction;
} // }
}); // });
const { wrapper } = setupMocks({ // const { wrapper } = setupMocks({
querySelectorFunction: function (query) { // querySelectorFunction: function (query) {
if (query == ".pac-container .pac-item") { // if (query == ".pac-container .pac-item > .pac-item-query") {
let element = document.createElement("div"); // let element = document.createElement("div");
element.textContent = "123 Test Street"; // element.textContent = "123 Test Street";
return element; // return element;
} // } else if (query == ".pac-container .pac-item > span:nth-child(3)") {
}, // let element = document.createElement("div");
geocoderResult: { // element.textContent = "Columbus, OH 43230";
address_components: [ // return element;
{ // }
long_name: "1234", // },
short_name: "1234", // geocoderResult: {
types: ["street_number"], // address_components: [
}, // {
{ // long_name: "1234",
long_name: "Test Road", // short_name: "1234",
short_name: "Test Road", // types: ["street_number"],
types: ["route"], // },
}, // {
{ // long_name: "Test Road",
long_name: "East Columbus", // short_name: "Test Road",
short_name: "Columbus", // types: ["route"],
types: ["neighborhood", "political"], // },
}, // {
{ // long_name: "East Columbus",
long_name: "Columbus", // short_name: "Columbus",
short_name: "Columbus", // types: ["neighborhood", "political"],
types: ["locality", "political"], // },
}, // {
{ // long_name: "Columbus",
long_name: "Franklin County", // short_name: "Columbus",
short_name: "Franklin County", // types: ["locality", "political"],
types: ["administrative_area_level_2", "political"], // },
}, // {
{ // long_name: "Franklin County",
long_name: "Ohio", // short_name: "Franklin County",
short_name: "OH", // types: ["administrative_area_level_2", "political"],
types: ["administrative_area_level_1", "political"], // },
}, // {
{ // long_name: "Ohio",
long_name: "United States", // short_name: "OH",
short_name: "US", // types: ["administrative_area_level_1", "political"],
types: ["country", "political"], // },
}, // {
{ // long_name: "United States",
long_name: "43215", // short_name: "US",
short_name: "43215", // types: ["country", "political"],
types: ["postal_code"], // },
}, // {
], // long_name: "43215",
}, // short_name: "43215",
}); // types: ["postal_code"],
// },
// ],
// },
// });
let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); // let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); // let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
expect(noMatchAlert.exists()).toBeFalsy(); // expect(noMatchAlert.exists()).toBeFalsy();
expect(verificationAlert.exists()).toBeFalsy(); // expect(verificationAlert.exists()).toBeFalsy();
await wrapper.vm.$nextTick(); // await wrapper.vm.$nextTick();
// Act // // Act
changeEventCallbackFunction(); // changeEventCallbackFunction();
await wrapper.vm.$nextTick(); // await wrapper.vm.$nextTick();
// Assert // // Assert
const addressModel = wrapper.vm.addressModel; // const addressModel = wrapper.vm.addressModel;
expect(addressModel.streetAddress).toEqual("1234 Test Road"); // expect(addressModel.streetAddress).toEqual("1234 Test Road");
expect(addressModel.city).toEqual("Columbus"); // expect(addressModel.city).toEqual("Columbus");
expect(addressModel.state).toEqual("OH"); // expect(addressModel.state).toEqual("OH");
expect(addressModel.zipCode).toEqual("43215"); // expect(addressModel.zipCode).toEqual("43215");
}); // });
}); });
describe("alerts", () => { describe("alerts", () => {
test("user enters address that yields no autocomplete results => show noMatch alert", async () => { test("user enters address that yields no autocomplete results and pressed enter or tab => show noMatch alert", async () => {
// Arrange // Arrange
let changeEventCallbackFunction; let changeEventCallbackFunction;
autocompleteElement.addEventListener = jest autocompleteElement.addEventListener = jest
.fn() .fn()
.mockImplementation((eventName, callbackFunction) => { .mockImplementation((eventName, callbackFunction) => {
if (eventName == "change") { if (eventName == "keydown") {
changeEventCallbackFunction = callbackFunction; changeEventCallbackFunction = callbackFunction;
} }
}); });
@ -394,8 +405,13 @@ describe("address-questions.vue", () => {
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
const e = {
code: "Enter",
};
// Act // Act
changeEventCallbackFunction(); //autocompleteElement.dispatchEvent(new Event("keydown"), e);
changeEventCallbackFunction(e);
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
@ -406,48 +422,52 @@ describe("address-questions.vue", () => {
expect(noMatchAlert.isVisible()).toBeTruthy(); expect(noMatchAlert.isVisible()).toBeTruthy();
}); });
test("user enters address that yields autocomplete results, but doesn't select => show verification alert", async () => { // test("user enters address that yields autocomplete results, but doesn't select => show verification alert", async () => {
// Arrange // // Arrange
let changeEventCallbackFunction; // let changeEventCallbackFunction;
autocompleteElement.addEventListener = jest // autocompleteElement.addEventListener = jest
.fn() // .fn()
.mockImplementation((eventName, callbackFunction) => { // .mockImplementation((eventName, callbackFunction) => {
if (eventName == "change") { // if (eventName == "change") {
changeEventCallbackFunction = callbackFunction; // changeEventCallbackFunction = callbackFunction;
} // }
}); // });
const { wrapper } = setupMocks({ // const { wrapper } = setupMocks({
querySelectorFunction: function (query) { // querySelectorFunction: function (query) {
if (query == ".pac-container .pac-item") { // if (query == ".pac-container .pac-item > .pac-item-query") {
let element = document.createElement("div"); // let element = document.createElement("div");
element.textContent = "123 Test Street"; // element.textContent = "123 Test Street";
return element; // return element;
} // } else if (query == ".pac-container .pac-item > span:nth-child(3)") {
}, // let element = document.createElement("div");
}); // element.textContent = "Columbus, OH 43230";
// return element;
// }
// },
// });
let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); // let noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); // let verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
expect(noMatchAlert.exists()).toBeFalsy(); // expect(noMatchAlert.exists()).toBeFalsy();
expect(verificationAlert.exists()).toBeFalsy(); // expect(verificationAlert.exists()).toBeFalsy();
await wrapper.vm.$nextTick(); // await wrapper.vm.$nextTick();
// Act // // Act
changeEventCallbackFunction(); // changeEventCallbackFunction();
await wrapper.vm.$nextTick(); // await wrapper.vm.$nextTick();
// Assert // // Assert
verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" }); // verificationAlert = wrapper.findComponent({ ref: "alertVerificationWarning" });
expect(wrapper.vm.displayVerificationWarning).toBeTruthy(); // expect(wrapper.vm.displayVerificationWarning).toBeTruthy();
expect(verificationAlert.exists()).toBeTruthy(); // expect(verificationAlert.exists()).toBeTruthy();
expect(verificationAlert.isVisible()).toBeTruthy(); // expect(verificationAlert.isVisible()).toBeTruthy();
noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" }); // noMatchAlert = wrapper.findComponent({ ref: "alertNoMatchWarning" });
expect(wrapper.vm.displayNoMatchWarning).toBeFalsy(); // expect(wrapper.vm.displayNoMatchWarning).toBeFalsy();
expect(noMatchAlert.exists()).toBeFalsy(); // expect(noMatchAlert.exists()).toBeFalsy();
}); // });
describe("noMatch alert is cleared on address change", () => { describe("noMatch alert is cleared on address change", () => {
test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => { test("user sees noMatch warning and modifies street address => noMatch warning is removed", async () => {
@ -567,6 +587,7 @@ function setupMocks({
isShallowMount = true, isShallowMount = true,
querySelectorFunction, querySelectorFunction,
geocoderResult = ["1234 Test Street"], geocoderResult = ["1234 Test Street"],
matchFound = false,
}) { }) {
store.commit(storeMutations.RESET_STATE); store.commit(storeMutations.RESET_STATE);
@ -579,6 +600,12 @@ function setupMocks({
loadScript: jest.fn().mockResolvedValue(), loadScript: jest.fn().mockResolvedValue(),
}); });
if (props) resultingMountOptions.propsData = props;
const wrapper = isShallowMount
? shallowMount(addressQuestions, resultingMountOptions)
: mount(addressQuestions, resultingMountOptions);
window.google = { window.google = {
maps: { maps: {
event: { event: {
@ -593,13 +620,15 @@ function setupMocks({
}), }),
removeListener: jest.fn(), removeListener: jest.fn(),
clearInstanceListeners: jest.fn(), clearInstanceListeners: jest.fn(),
trigger: jest.fn().mockImplementation((element, eventName) => {
wrapper.vm.matchFound = matchFound;
}),
}, },
places: { places: {
Autocomplete: jest.fn().mockImplementation((el) => el), Autocomplete: jest.fn().mockImplementation((el) => el),
}, },
Geocoder: class Geocoder { Geocoder: class Geocoder {
// constructor(); // constructor();
geocode(request, callback) { geocode(request, callback) {
callback([geocoderResult], true); callback([geocoderResult], true);
} }
@ -610,12 +639,6 @@ function setupMocks({
}, },
}; };
if (props) resultingMountOptions.propsData = props;
const wrapper = isShallowMount
? shallowMount(addressQuestions, resultingMountOptions)
: mount(addressQuestions, resultingMountOptions);
document.querySelector = jest.fn().mockImplementation((query) => { document.querySelector = jest.fn().mockImplementation((query) => {
let result = null; let result = null;
if (query == ".pac-container") result = document.createElement("div"); if (query == ".pac-container") result = document.createElement("div");

168
src/fmg-components/address-questions/address-questions.vue
View file

@ -220,6 +220,7 @@ export default {
).then(() => { ).then(() => {
// When loaded, trigger the setup // When loaded, trigger the setup
this.initializeAutocomplete(); this.initializeAutocomplete();
this.addressField1.focus();
}); });
}, },
initializeAutocomplete() { initializeAutocomplete() {
@ -227,7 +228,7 @@ export default {
this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, { this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, {
componentRestrictions: { country: ["us"] }, componentRestrictions: { country: ["us"] },
fields: ["address_components"], fields: ["address_components"],
types: ["geocode"], types: ["address"],
}); });
// Set up the Autocomplete place_changed event to call our method to fill in the address // Set up the Autocomplete place_changed event to call our method to fill in the address
@ -245,111 +246,117 @@ export default {
const streetAddressField = document.getElementById("streetAddressField"); const streetAddressField = document.getElementById("streetAddressField");
const autocompleteResultsContainer = const autocompleteResultsContainer =
document.getElementsByClassName("pac-container")[0]; document.getElementsByClassName("pac-container")[0];
if (autocompleteResultsContainer) { if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer); streetAddressField.appendChild(autocompleteResultsContainer);
} }
// Unfortunately this is the only place we can set the autocomplete attribute without the
// Google Places object resetting it to "off" which does nothing to prevent browser autofill
this.addressField1.setAttribute("autocomplete", "do-not-autofill");
}); });
this.addressField1.addEventListener("keydown", (e) => { this.addressField1.addEventListener("keydown", (e) => {
// When the user presses a key in the Street Address field, immediately disable autocomplete for that field.
// For some reason we have to explicitly tell FireFox to set it to "off" which doesn't actually disable autofill
// then set it to "new-password" which does disable it on both WebKit and FireFox. ¯\_(ツ)_/¯
this.addressField1.setAttribute("autocomplete", "off");
this.addressField1.setAttribute("autocomplete", "new-password");
// If a match has been previously attempted then do nothing // If a match has been previously attempted then do nothing
if (this.matchFound !== null) { if (this.matchFound !== null) {
return; return;
} }
const event = new Event("place_changed");
// When either of the two enter keys or the tab key are pressed // When either of the two enter keys or the tab key are pressed
if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
// Grab the selected item window.google.maps.event.trigger(this.autocomplete, "place_changed");
const selectedItem = document.querySelector(
".pac-container .pac-item-selected"
);
if (selectedItem !== null) {
// If an item was selected then fill in the address with the selected item
// by triggering the "place_changed" event of the Autocomplete object
this.autocomplete.dispatchEvent(event);
} else {
// Otherwise fill-in the address using first item from the list.
this.fillInAddressUsingFirstItem();
}
} else {
return;
}
});
this.addressField1.addEventListener("change", () => {
// If a match has been previously attempted then do nothing
if (this.matchFound !== null) {
return;
}
// Get the address that the user clicked on (if any)
const clickedAddress = document.querySelector(".pac-container .pac-item:hover");
// If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
if (clickedAddress === null) {
// Fill-in the address using first item in the list.
this.fillInAddressUsingFirstItem();
} }
}); });
}, },
findAddressComponentByType(place, componentName, componentLength) {
const component = place.address_components.find((component) =>
component.types.find((type) => type == componentName)
);
if (component) {
return component[componentLength] ?? "";
} else {
return "";
}
},
fillInAddress(place) { fillInAddress(place) {
if (!place) { if (!place) {
place = this.autocomplete.getPlace(); place = this.autocomplete.getPlace();
} }
const selectedItem = document.querySelector(".pac-item-selected");
if (!place && !selectedItem) {
this.fillInAddressUsingFirstItem();
return;
}
if (place && place.address_components) { if (place && place.address_components) {
this.matchFound = true; this.matchFound = true;
const self = this; const self = this;
this.$nextTick(function () { this.$nextTick(function () {
self.showAddressFields = true; self.showAddressFields = true;
for (const component of place.address_components) { const streetNumber = this.findAddressComponentByType(
const componentType = component.types[0]; place,
"street_number",
"long_name"
);
const route = this.findAddressComponentByType(place, "route", "short_name");
const city = this.findAddressComponentByType(place, "locality", "long_name");
switch (componentType) { let state = "";
case "street_number": { let zipCode = "";
self.addressModel.streetAddress = component.long_name;
break; // If city has an exact match, fill in the state from the autocomplete.
} if (city != "") {
case "route": { state = this.findAddressComponentByType(
self.addressModel.streetAddress += " " + component.short_name; place,
break; "administrative_area_level_1",
} "short_name"
case "locality": { );
self.addressModel.city = component.long_name; }
break;
} // If state has an exact match, fill in the zipCode from the autocomplete.
case "administrative_area_level_1": { if (state != "") {
self.addressModel.state = component.short_name; zipCode = this.findAddressComponentByType(
break; place,
} "postal_code",
case "postal_code": { "long_name"
self.addressModel.zipCode = component.long_name; );
break; }
}
} const isAddressComplete =
(streetNumber ?? "") !== "" &&
(route ?? "") !== "" &&
(city ?? "") !== "" &&
(state ?? "") !== "" &&
(zipCode ?? "") !== "";
self.addressModel.streetAddress =
streetNumber && route ? `${streetNumber} ${route}` : `${route}`;
self.addressModel.city = city;
self.addressModel.state = state;
self.addressModel.zipCode = zipCode;
if (!this.displayVerificationWarning) {
this.displayVerificationWarning = place.partial_match || !isAddressComplete;
} }
// After filling in the address fields, disable the address autocomplete // After filling in the address fields, disable the address autocomplete
this.unloadAutocomplete(); this.unloadAutocomplete();
// Restore focus to the first address field
this.addressField1.focus();
}); });
} }
}, },
fillInAddressUsingFirstItem() { fillInAddressUsingFirstItem() {
// Fill-in the address using first item in the list. // Fill-in the address using first item in the list.
const item = document.querySelector(".pac-container .pac-item"); const item = document.querySelector(".pac-container .pac-item > .pac-item-query");
const item2 = document.querySelector(".pac-container .pac-item > span:nth-child(3)");
if (item != null) { if (item != null) {
const firstResult = item.textContent; let firstResult = `${item.textContent}, ${item2.textContent}`;
const geocoder = new window.google.maps.Geocoder(); const geocoder = new window.google.maps.Geocoder();
const self = this; const self = this;
geocoder.geocode( geocoder.geocode(
@ -358,8 +365,8 @@ export default {
}, },
function (results, status) { function (results, status) {
if (status === window.google.maps.GeocoderStatus.OK) { if (status === window.google.maps.GeocoderStatus.OK) {
self.fillInAddress(results[0]);
self.displayVerificationWarning = true; self.displayVerificationWarning = true;
self.fillInAddress(results[0]);
} }
} }
); );
@ -398,6 +405,28 @@ export default {
if (!this.showAddressFields) { if (!this.showAddressFields) {
this.loadGooglePlacesAutocompleteScript(); this.loadGooglePlacesAutocompleteScript();
} }
const element = document.getElementsByClassName("address-questions")[0];
element.addEventListener("change", (e) => {
let autoFilledInputs = [];
autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
if (this.showAddressFields) {
return;
}
this.showAddressFields = autoFilledInputs.length > 0;
if (this.showAddressFields) {
this.unloadAutocomplete();
}
this.addressField1.classList.remove("has-icon");
});
},
beforeUpdate() {
// It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal.
if (!this.addressField1.matches(":focus")) {
this.addressField1.focus();
}
}, },
unmounted() { unmounted() {
this.unloadAutocomplete(); this.unloadAutocomplete();
@ -435,6 +464,7 @@ export default {
); );
} }
}, },
deep: true,
}, },
}, },
components: { components: {

3
src/layouts/address-lookup/address-lookup.vue
View file

@ -5,7 +5,7 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
autocomplete="off"> autocomplete="off">
<div class="container-fluid page-container-grouped-styles"> <div class="container-fluid page-container-grouped-styles" id="address-lookup">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -25,7 +25,6 @@
v-model="customerQuestions" v-model="customerQuestions"
:validationRules="EmailValidationRules" :validationRules="EmailValidationRules"
:isEmailOptional="IsEmailOptional" /> :isEmailOptional="IsEmailOptional" />
<alert <alert
ref="alertVinNotFound" ref="alertVinNotFound"
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"

68
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -1,40 +1,42 @@
<template> <template>
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" /> <div class="customer-questions">
<div class="row mb-4"> <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
<div class="col"> <div class="row mb-4">
<textboxQuestion <div class="col">
cmsWidgetName="FirstNameQuestionWidget" <textboxQuestion
v-model="customerModel.firstName" cmsWidgetName="FirstNameQuestionWidget"
ref="firstName" v-model="customerModel.firstName"
customInputId="firstName" ref="firstName"
validationRules="first-name-required" /> customInputId="firstName"
validationRules="first-name-required" />
</div>
</div> </div>
</div> <div class="row mb-4">
<div class="row mb-4"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion cmsWidgetName="LastNameQuestionWidget"
cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName"
v-model="customerModel.lastName" ref="lastName"
ref="lastName" customInputId="lastName"
customInputId="lastName" validationRules="last-name-required" />
validationRules="last-name-required" /> </div>
</div> </div>
</div> <div class="row mt-4">
<div class="row mt-4"> <div class="col">
<div class="col"> <textboxQuestion
<textboxQuestion cmsWidgetName="EmailAddressQuestionWidget"
cmsWidgetName="EmailAddressQuestionWidget" v-model="customerModel.emailAddress"
v-model="customerModel.emailAddress" ref="emailAddress"
ref="emailAddress" customInputId="emailAddress"
customInputId="emailAddress" :isRequired="!isEmailOptional"
:isRequired="!isEmailOptional" :validationRules="validationRules"
:validationRules="validationRules" :addOptionalText="isEmailOptional" />
:addOptionalText="isEmailOptional" /> </div>
</div> </div>
</div> <div class="row mb-0">
<div class="row mb-0"> <div class="col">
<div class="col"> <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" /> </div>
</div> </div>
</div> </div>
</template> </template>