commit
ce59e7d68c
7 changed files with 44 additions and 46 deletions
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue