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

Technical review changes

Browse source
This commit is contained in:
Leah Schumann 2023-03-24 13:44:31 -04:00
parent e0a5791675
commit df2665a2ce
6 changed files with 74 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/error-messages.js
View file

@ -25,6 +25,7 @@ const errorMessages = {
"Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
OPTION_REQUIRED: "Please select an option",
VEHICLE_REQUIRED: "Please select a vehicle",
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
};
export { errorMessages };

15
src/digital-components/modal/modal.vue
View file

@ -60,14 +60,17 @@ export default {
setup() {
const modalId = `modal-${crypto.randomUUID()}`;
const form = useForm();
const { meta, validate, resetForm } = useForm();
const isFormTouched = useIsFormTouched();
const isFormDirty = useIsFormDirty();
const isFormValid = useIsFormValid();
return {
modalId,
form,
meta,
validate,
resetForm,
isFormTouched,
isFormDirty,
isFormValid,
@ -75,7 +78,7 @@ export default {
},
methods: {
async validateAndEmit() {
const validationResult = await this.form.validate();
const validationResult = await this.validate();
if (validationResult.valid) {
this.$emit("footer-button-event");
} else {
@ -103,10 +106,10 @@ export default {
},
computed: {
isFooterButtonDisabled() {
if (!this.isFormTouched) {
return !this.isFormValid;
if (!this.meta.touched) {
return !this.meta.valid;
}
return !this.isFormDirty || !this.isFormValid;
return !this.meta.dirty || !this.meta.valid;
},
},
components: {

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

@ -1,11 +1,19 @@
<template>
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<div
class="textbox-question"
:class="[
(errors && errors.length) || hasError ? 'has-error' : '',
hideInput ? 'hide-input' : '',
]">
<label
v-if="displayQuestionText"
:for="inputId"
:aria-label="questionText"
class="form-label"
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
:class="[
questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
hideInput ? 'hide-input' : '',
]"
v-html="questionText"></label>
<div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
<input
@ -25,6 +33,7 @@
hasIcon ? 'has-icon' : '',
iconRight ? 'icon-right' : '',
cornerStyle === 'rounded' ? 'rounded-pill' : '',
hideInput ? 'hide-input' : '',
]"
:validationRules="validationRules"
@change="handleChange"
@ -34,7 +43,12 @@
<button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
</div>
<div v-show="errorMessage" class="row my-1 form-test-error">
<span class="d-inline-flex small mt-0" role="alert">{{ errorMessage }}</span>
<span
class="d-inline-flex small mt-0"
role="alert"
:class="[centerErrorMessage ? 'center-error-message' : '']"
>{{ errorMessage }}</span
>
</div>
</div>
</template>
@ -74,6 +88,8 @@ export default {
questionAlignment: String, // Left or center. Left is default.
cornerStyle: String, // Rounded or square. Square is default.
includeSearchIcon: Boolean,
hideInput: Boolean,
centerErrorMessage: Boolean,
},
setup(props) {
const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@ -142,6 +158,12 @@ export default {
<style lang="scss">
.textbox-question {
.hide-input {
display: none;
}
.center-error-message {
justify-content: center !important;
}
label {
color: $black;
font-weight: 500;

13
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -26,6 +26,8 @@
:ref="modalName"
:headerText="modalHeaderText"
:footerButtonText="modalFooterText"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
@footer-button-event="setMobileLocation">
<addressQuestions
ref="addressQuestions"
@ -152,11 +154,20 @@ export default {
closeModal() {
this.$refs[this.modalName].closeModal();
},
onModalOpened() {
this.internalModel = deepClone(this.modelValue);
},
onModalClosed() {
this.internalModel = deepClone(this.modelValue);
},
resetComponent(updatedServiceZipCodeInfo) {
// Reset the validation form, setting the initial values
// for the state and zipCode to those that were entered
// on the service-zip-modal-question component
this.$refs[this.modalName].form.resetForm({
this.$refs[this.modalName].resetForm({
values: {
autocomplete: updatedServiceZipCodeInfo.streetAddress,
city: updatedServiceZipCodeInfo.city,

31
src/layouts/service-location/service-location.vue
View file

@ -23,10 +23,16 @@
ref="mobileLocationModalQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget" />
<textboxQuestion
ref="mobileLocationQuestionsError"
v-model="mobileLocationValidationField"
validationRules="mobile-location-required"
hideInput
centerErrorMessage />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -42,7 +48,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import { Form, defineRule } from "vee-validate";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
// Supporting files
import baseMixin from "@/mixins/base-mixin.js";
@ -51,6 +58,10 @@ import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
import store from "@/store";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
defineRule("mobile-location-required", required(errorMessages.MOBILE_LOCATION_REQUIRED));
export default {
name: "service-location",
@ -66,6 +77,7 @@ export default {
isZipServiceableInShop: null,
mobileFeePart: null,
zipContainsMilitaryBase: false,
mobileLocationValidationField: null,
};
},
async beforeRouteEnter(to, from, next) {
@ -139,6 +151,8 @@ export default {
this.state = newValue.addressQuestions.state;
this.zipCode = newValue.addressQuestions.zipCode;
this.isVehicleProtected = newValue.isVehicleProtected;
this.mobileLocationValidationField = "isValid";
},
},
shouldDisableForwardAction() {
@ -180,6 +194,12 @@ export default {
this.isVehicleProtected = null;
},
setServiceZipCodeModalMeta(meta) {
this.serviceZipCodeMeta = meta;
},
setMobileLocationModalMeta(meta) {
this.mobileLocationMeta = meta;
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
@ -188,9 +208,9 @@ export default {
},
},
watch: {
zipCode(current, previous) {
if (current !== previous) {
baseMixin.methods.getZipCodeData(current).then((r) => {
zipCode(newValue, oldValue) {
if (newValue !== oldValue) {
baseMixin.methods.getZipCodeData(newValue).then((r) => {
this.zipContainsMilitaryBase = r.containsMilitaryBase;
});
}
@ -205,6 +225,7 @@ export default {
funnelSubHeader,
Form,
loadingModal,
textboxQuestion,
},
};
</script>

2
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -38,7 +38,7 @@ import textLink from "@/ux-components/text-link/text-link";
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
import modal from "@/digital-components/modal/modal";
import alert from "@/ux-components/alert/alert";
import store from "@/store";
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
export default {