some hide show updates change modelValue to emit

This commit is contained in:
Bill Richardson 2026-02-25 14:23:29 -05:00
parent f72772e6b0
commit b4e929d574
4 changed files with 45 additions and 24 deletions

View file

@ -329,6 +329,7 @@ export default {
return {
inShopAvailabilityRating: 'high',
inShopDatesData: [],
isDatePickerRefreshing: false,
isMobileView: false,
mobileDatesData: [],
mobileFeePart: null,
@ -362,7 +363,8 @@ export default {
const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
&& serviceLocationToUse.zipCodeCtu !== null
&& serviceLocationToUse.appointmentType !== null
&& (validMobileAppointmentType || validInShopAppointmentType);
&& (validMobileAppointmentType || validInShopAppointmentType)
&& !this.isDatePickerRefreshing;
const damageInfo = useMainStore().order.damage.isRepair
|| (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0);
@ -688,11 +690,12 @@ export default {
}
},
async refreshDatePicker() {
console.log('refresh date picker...');
this.resetLocalFlags();
this.isDatePickerRefreshing = true;
await this.getDatePickerInitialData().then((data) => {
this.selectableDatesData = data.initialShopTimeSlotsResponse;
this.$refs.datePicker.initializeComponent(data);
this.isDatePickerRefreshing = false;
showIssLoadingModal(false);
});
},

View file

@ -96,13 +96,14 @@
</div>
<serviceZipQuestion
ref="mobileServiceZipCodeQuestion"
v-model="mobileZipCode"
customInputId="mobileServiceZipCode"
class="mobile-service-zip-question"
:parentZipCode="mobileZipCode"
:placeholderText="mobileZipPlaceholder"
:serviceZipFormatErrorMessage="errorMessages.MOBILE_SERVICE_ZIP_FORMAT"
:hasError="mobileZipError !== ''"
cmsWidgetName="MobileZipWidget" />
cmsWidgetName="MobileZipWidget"
@serviceZipCodeUpdated="handleServiceZipCodeChanged" />
<div
v-if="mobileZipError"
ref="errorMessageDiv"
@ -300,16 +301,7 @@ export default {
},
async mobileZipCode(newZip, oldZip) {
if (newZip !== '' && newZip !== oldZip && !this.initializingData) {
showIssLoadingModal(true);
await this.updateMobileZip();
const updateMobileZipServiceLocationObj = {
mobileProviderNumber: this.mobileProviderNumber,
provider: null,
refreshDatePicker: true,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu
};
this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
await this.processMobileZipCodeChange();
}
},
schedulingInshopAvailabilityRating(newRating) {
@ -446,6 +438,26 @@ export default {
this.$emit('in-shop-zip-updated', inShopZipServiceLocationObj);
});
},
async handleServiceZipCodeChanged(serviceZipCodeFromQuestion) {
if (serviceZipCodeFromQuestion !== this.mobileZipCode) {
// Can probs just make this one call but have to think about initialization flow and not wanting to trigger extra calls on load
this.mobileZipCode = serviceZipCodeFromQuestion;
} else {
await this.processMobileZipCodeChange();
}
},
async processMobileZipCodeChange() {
showIssLoadingModal(true);
await this.updateMobileZip();
const updateMobileZipServiceLocationObj = {
mobileProviderNumber: this.mobileProviderNumber,
provider: null,
refreshDatePicker: true,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu
};
this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
},
setCtuForMobile(val) {
this.zipCodeCtu = val;
},

View file

@ -10,7 +10,7 @@
isRequired
:hasError="hasError"
:validationRules="`zip-required|${cmsWidgetName}-zip-format`"
@clickEvent="updateModelValue"
@clickEvent="emitZipCodeUpdate"
@fieldHasError="handleFieldError" />
</template>
@ -32,7 +32,7 @@ export default {
},
// TODO: Correct prop def.
props: {
modelValue: String,
parentZipCode: String,
cmsWidgetName: String,
serviceZipFormatErrorMessage: {
type: String,
@ -43,14 +43,14 @@ export default {
default: false
}
},
emits: ['update:modelValue', 'field-has-error'],
emits: ['service-zip-code-updated', 'field-has-error'],
data() {
return {
internalZipcode: this.modelValue
internalZipcode: this.parentZipCode
};
},
watch: {
modelValue(newValue) {
parentZipCode(newValue) {
if (newValue !== this.internalZipcode) {
this.internalZipcode = newValue;
}
@ -63,8 +63,8 @@ export default {
handleFieldError(hasError) {
this.$emit('field-has-error', hasError);
},
updateModelValue() {
this.$emit('update:modelValue', this.internalZipcode);
emitZipCodeUpdate() {
this.$emit('service-zip-code-updated', this.internalZipcode);
}
}
};

View file

@ -75,10 +75,11 @@
<serviceZipQuestion
v-if="renderServiceZip"
:ref="SERVICE_ZIP_QUESTION_REF_NAME"
v-model="internalZipcode"
:parentZipCode="internalZipcode"
customInputId="serviceZipCode"
:cmsWidgetName="textboxQuestionWidgetName"
@fieldHasError="handleFieldError" />
@fieldHasError="handleFieldError"
@serviceZipCodeUpdated="handleServiceZipCodeChanged" />
<div
v-if="errorMessage"
ref="errorMessageDiv"
@ -243,7 +244,7 @@ export default {
showIssLoadingModal(false);
}
},
methods: {
methods: {
async updateShops(autoExpand = false) {
this.errorMessage = '';
let result = await this.getNearbyShops(this.searchRadiusInMiles);
@ -333,6 +334,11 @@ export default {
this.errorMessage = '';
}
},
async handleServiceZipCodeChanged(serviceZipCodeFromQuestion) {
if (serviceZipCodeFromQuestion !== this.internalZipcode) {
this.internalZipcode = serviceZipCodeFromQuestion;
}
},
forceServiceZipRerender() {
this.renderServiceZip = false;
this.$nextTick(() => {