Merge pull request #1190 from Safelite/defect/CSR-1467

Defect/csr 1467
This commit is contained in:
Leah Schumann 2023-06-28 08:32:12 -04:00 committed by GitHub
commit ce59e7d68c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 44 additions and 46 deletions

View file

@ -59,7 +59,7 @@
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
ref="serviceZip"
inputId="7add1b26df344f2caf1678de5797803f"
customInputId="serviceZip"
aria-haspopup=""
mask="#####"
validationRules="service-zip-required|service-zip-format" />

View file

@ -122,16 +122,16 @@ export default {
},
data() {
return {
autocomplete: null,
autocompleteListener: null,
showAddressFields: false,
matchFound: null, // null = no attempted match, true = match was found, false = match was not found
displayVerificationWarning: false,
displayNoMatchWarning: false,
alertHeadlineVerificationWarning: "",
alertCopyVerificationWarning: "",
alertHeadlineNoMatchWarning: "",
alertCopyNoMatchWarning: "",
autocomplete: null,
autocompleteListener: null,
showAddressFields: false,
matchFound: null, // null = no attempted match, true = match was found, false = match was not found
};
},
computed: {
@ -218,7 +218,7 @@ export default {
this.$loadScript(
`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype`
).then(() => {
// When loaded trigger the setup
// When loaded, trigger the setup
this.initializeAutocomplete();
});
},
@ -255,6 +255,11 @@ export default {
});
this.addressField1.addEventListener("keydown", (e) => {
// If a match has been previously attempted then do nothing
if (this.matchFound !== null) {
return;
}
const event = new Event("place_changed");
// When either of the two enter keys or the tab key are pressed
@ -334,6 +339,9 @@ export default {
// After filling in the address fields, disable the address autocomplete
this.unloadAutocomplete();
// Restore focus to the first address field
this.addressField1.focus();
});
}
},

View file

@ -6,7 +6,7 @@
cmsWidgetName="FirstNameQuestionWidget"
v-model="customerModel.firstName"
ref="firstName"
inputId="08497a2efd9a4a73a70360ab47b4838d"
customInputId="firstName"
validationRules="first-name-required" />
</div>
</div>
@ -16,7 +16,7 @@
cmsWidgetName="LastNameQuestionWidget"
v-model="customerModel.lastName"
ref="lastName"
inputId="0030e56a57e74a4ab92de7fb8e97fec5"
customInputId="lastName"
validationRules="last-name-required" />
</div>
</div>
@ -26,8 +26,7 @@
cmsWidgetName="EmailAddressQuestionWidget"
v-model="customerModel.emailAddress"
ref="emailAddress"
inputId="00450a91b8964a768ce3992e6feb890f"
disableAutoFill
customInputId="emailAddress"
validationRules="email-address-format" />
</div>
</div>

View file

@ -13,7 +13,7 @@
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
inputId="license_plate"
customInputId="licensePlate"
validationRules="license-plate-required" />
</div>
</div>
@ -22,7 +22,7 @@
<textboxQuestion
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
inputId="zip"
customInputId="zip"
mask="#####"
validationRules="registration-zip-required|zip-format" />
</div>
@ -32,7 +32,7 @@
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="email"
inputId="email"
customInputId="email"
validationRules="email-address-format" />
</div>
</div>

View file

@ -68,15 +68,13 @@
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
:onZipUpdateCallback="reloadShopData" />
<Transition name="fade" mode="out-in">
<shopQuestion
ref="shopQuestion"
v-show="isShopQuestionDisplayed"
v-model="selectedProvider"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" />
</Transition>
<shopQuestion
ref="shopQuestion"
v-show="isShopQuestionDisplayed"
v-model="selectedProvider"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
@ -108,7 +106,6 @@ import baseMixin from "@/mixins/base-mixin.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import {
getPricedMobileFeePart,
getServiceabilityDetails,
@ -122,10 +119,10 @@ import { errorMessages } from "@/constants/error-messages";
// DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => {
if (
value.addressQuestions.streetAddress == null ||
value.addressQuestions.city == null ||
value.addressQuestions.state == null ||
value.addressQuestions.zipCode == null ||
value.addressQuestions.streetAddress == "" ||
value.addressQuestions.city == "" ||
value.addressQuestions.state == "" ||
value.addressQuestions.zipCode == "" ||
value.isVehicleProtected == null
) {
return errorMessages.MOBILE_LOCATION_REQUIRED;

View file

@ -21,12 +21,12 @@
customInputId="serviceZipCode"
v-model="internalModel.zipCode"
v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
:cmsWidgetName="textboxQuestionWidgetName" />
cmsWidgetName="ServiceZipQuestionWidget" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
:cmsWidgetName="alertInvalidZipWidgetName"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
</modal>
@ -72,15 +72,6 @@ export default {
type: Function,
},
},
setup() {
const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
const alertInvalidZipWidgetName = "AlertInvalidZipWidget";
return {
textboxQuestionWidgetName,
alertInvalidZipWidgetName,
};
},
computed: {
serviceZipLinkText() {
if (this.modelValue.zipCode && this.modelValue.zipCode.length > 0) {
@ -89,7 +80,7 @@ export default {
return this.getCmsContent(this.linkWidgetName, "BodyText");
},
modalHeaderText() {
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
return this.getCmsContent("ServiceZipQuestionWidget", "QuestionText");
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
@ -97,6 +88,9 @@ export default {
modalName() {
return this.modalWidgetName;
},
modal() {
return this.$refs[this.modalName];
},
},
methods: {
resetAlerts() {
@ -116,13 +110,13 @@ export default {
};
},
openModal() {
this.$refs[this.modalName].openModal();
this.modal.openModal();
},
closeModal() {
this.$refs[this.modalName].closeModal();
this.modal.closeModal();
},
resetModalButtonStyle() {
this.$refs[this.modalName].resetButtonStyle();
this.modal.resetButtonStyle();
},
onInputIdAssigned(inputId) {
this.serviceZipCodeTextInputId = inputId;

View file

@ -13,7 +13,7 @@
<textboxQuestion
cmsWidgetName="VinNumberQuestionWidget"
v-model="vin"
inputId="vin"
customInputId="vin"
isRequired
validationRules="vin-required|vin-format"
:isDisabled="vinPopulatedOnPageLoad"
@ -46,7 +46,7 @@
<textboxQuestion
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
inputId="serviceZipCode"
customInputId="serviceZipCode"
mask="#####"
isRequired
validationRules="zip-required|zip-format" />
@ -57,8 +57,8 @@
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"
disableAutoFill
customInputId="emailAddress"
isRequired
validationRules="email-address-format" />
</div>
</div>