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

WIP

Browse source
This commit is contained in:
Leah Schumann 2023-05-09 07:30:21 -04:00
parent 1dd661e7df
commit 3cf505f697
4 changed files with 51 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -137,6 +137,9 @@ export default {
alertInvalidZipWidgetName: String,
customComponentId: String,
validationRules: String,
optionalCallback: {
type: Function,
},
},
computed: {
mobileLocationLinkPromptText() {
@ -257,6 +260,10 @@ export default {
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
if (this.optionalCallback) {
await this.optionalCallback(serviceZipCode);
}
this.closeModal();
}
},

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

@ -12,7 +12,8 @@
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget" />
modalWidgetName="ServiceZipModalWidget"
:optionalCallback="reloadShopData" />
<alert
ref="alertMilitaryBaseZip"
class="my-5"
@ -64,17 +65,16 @@
validationRules="mobile-location-required"
ref="mobileLocationQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget" />
modalWidgetName="MobileLocationModalWidget"
:optionalCallback="reloadShopData" />
<Transition name="fade" mode="out-in">
<shopQuestion
ref="shopQuestion"
v-show="
selectedAppointmentType === 'Inshop' ||
selectedAppointmentType === 'Dropoff'
"
v-show="isShopQuestionDisplayed"
v-model="selectedProvider"
:serviceZipCode="zipCode"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" />
</Transition>
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@ -268,6 +268,12 @@ export default {
return this.isGlassServiceableInshop;
}
},
isShopQuestionDisplayed() {
return (
this.selectedAppointmentType === "Inshop" ||
this.selectedAppointmentType === "Dropoff"
);
},
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
requiresInshopRecalibration() {
return (
@ -364,6 +370,9 @@ export default {
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
async reloadShopData() {
await this.$refs.shopQuestion.reloadShopData(this.zipCode);
},
},
components: {
alert,

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

@ -69,6 +69,9 @@ export default {
},
linkWidgetName: String,
modalWidgetName: String,
optionalCallback: {
type: Function,
},
},
setup() {
const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
@ -161,6 +164,10 @@ export default {
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
if (this.optionalCallback) {
await this.optionalCallback(serviceZipCode);
}
this.closeModal();
}
} else {

53
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div class="shop-question" aria-live="polite">
<div v-if="isDisplayed" class="shop-question" aria-live="polite">
<alert
ref="alertDropoffInformation"
v-if="displayDropoffInformation"
@ -49,6 +49,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js";
import { nextTick } from "vue";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
@ -73,6 +74,7 @@ export default {
selectedAppointmentType: String,
cmsWidgetName: String,
validationRules: String,
isDisplayed: Boolean,
},
computed: {
questionText() {
@ -83,9 +85,11 @@ export default {
return this.modelValue;
},
set: function (newValue) {
const provider = this.shopProviders.find(
// Button Question only supports primitive values so we must get the full object to emit to the page
const provider = this.shopProviders?.find(
(provider) => provider.providerNumber == newValue
);
this.$emit("update:modelValue", provider);
},
},
@ -98,6 +102,9 @@ export default {
},
methods: {
loadInitialData(serviceZipCode) {
return this.loadData(serviceZipCode);
},
loadData(serviceZipCode) {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
serviceZipCode: serviceZipCode,
});
@ -164,44 +171,28 @@ export default {
this.answers = [];
this.shopIndex = 0;
this.selectedValue = "";
this.$refs.buttonQuestion.resetField();
},
async reloadShopData(serviceZipCode) {
const result = await this.loadInitialData(serviceZipCode);
this.initializeComponent(result);
const result = await this.loadData(serviceZipCode);
this.initializeComponent(result.data);
this.resetShopList();
await nextTick();
await this.getNextShopsFromList();
},
},
watch: {
serviceZipCode: {
async handler(newValue) {
await this.reloadShopData(newValue);
},
},
selectedAppointmentType: {
async handler() {
// If the validation has been previously triggered, clear it before displaying the component
this.$refs.buttonQuestion.resetField();
this.resetShopList();
await this.getNextShopsFromList();
await this.$nextTick();
this.scrollToPageBottom();
},
},
shopProviders: {
async handler(newValue) {
this.$refs.buttonQuestion.resetField();
const selectedShopIndex = newValue.findIndex(
(provider) => provider.providerNumber == this.modelValue?.providerNumber
);
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
this.resetShopList();
await this.$nextTick();
if (newValue !== "Mobile") {
await this.getNextShopsFromList();
await this.$nextTick();
this.scrollToPageBottom();
}
},
},