Checkpoint - needs additional testing / debugging
This commit is contained in:
Leah Schumann
parent
01fbea8f62
commit
77ebdf1a7e
3 changed files with 104 additions and 113 deletions
|
|
@ -46,7 +46,7 @@
|
|||
alertClass="alert-warning" />
|
||||
<appointmentTypeQuestion
|
||||
v-model="selectedAppointmentType"
|
||||
v-if="!displayNoShopsAlert"
|
||||
v-show="!displayNoShopsAlert"
|
||||
:isServiceableMobile="isServiceableMobile"
|
||||
:isServiceableInshop="isServiceableInshop"
|
||||
ref="appointmentTypeQuestion"
|
||||
|
|
@ -67,12 +67,14 @@
|
|||
modalWidgetName="MobileLocationModalWidget" />
|
||||
<shopQuestion
|
||||
ref="shopQuestion"
|
||||
v-show="selectedAppointmentType === 'Inshop' || selectedAppointmentType === 'Dropoff'"
|
||||
v-model="selectedShop"
|
||||
v-show="
|
||||
selectedAppointmentType === 'Inshop' || selectedAppointmentType === 'Dropoff'
|
||||
"
|
||||
v-model="providerNumber"
|
||||
:isDropoff="isDropoff"
|
||||
:serviceZipCode="zipCode"
|
||||
:selectedAppointmentType="selectedAppointmentType"
|
||||
:shopQuestionData="shopQuestionData"
|
||||
:shopQuestionData="shopQuestionInitialData"
|
||||
cmsWidgetName="ShopQuestionWidget" />
|
||||
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||
<funnel-footer
|
||||
|
|
@ -147,9 +149,8 @@ export default {
|
|||
mobileFeePart: null,
|
||||
zipContainsMilitaryBase: false,
|
||||
selectedAppointmentType: "Dropoff",
|
||||
providerNumber: null,
|
||||
shopQuestionData: null,
|
||||
selectedShop: "",
|
||||
providerNumber: "127",
|
||||
shopQuestionInitialData: null,
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -163,7 +164,7 @@ export default {
|
|||
|
||||
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
|
||||
|
||||
const shopQuestionDataPromise = shopQuestion.methods.loadData();
|
||||
const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
|
|
@ -184,8 +185,8 @@ export default {
|
|||
promise: getZipCodeData,
|
||||
},
|
||||
{
|
||||
resultKey: "shopQuestionData",
|
||||
promise: shopQuestionDataPromise,
|
||||
resultKey: "shopQuestionInitialData",
|
||||
promise: shopQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -197,9 +198,9 @@ export default {
|
|||
vm.setData(
|
||||
resultMap.zipCodeData,
|
||||
resultMap.serviceabilityDetails,
|
||||
resultMap.mobileFeePart,
|
||||
resultMap.shopQuestionData
|
||||
resultMap.mobileFeePart
|
||||
);
|
||||
vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -321,10 +322,6 @@ export default {
|
|||
if (mobileFeePart) {
|
||||
this.mobileFeePart = mobileFeePart;
|
||||
}
|
||||
|
||||
if (shopQuestionData) {
|
||||
this.shopQuestionData = shopQuestionData;
|
||||
}
|
||||
},
|
||||
setContainsMilitaryBase(val) {
|
||||
if (this.zipContainsMilitaryBase !== val) {
|
||||
|
|
@ -374,6 +371,15 @@ export default {
|
|||
this.$refs[modalName].openModal();
|
||||
},
|
||||
},
|
||||
// watch: {
|
||||
// zipCode: {
|
||||
// async handler() {
|
||||
// console.log(this.$refs)
|
||||
// const initialData = await this.$refs.shopQuestion.loadInitialData();
|
||||
// this.$refs.shopQuestion.initializeComponent(initialData);
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
components: {
|
||||
alert,
|
||||
serviceZipModalQuestion,
|
||||
|
|
|
|||
|
|
@ -71,17 +71,12 @@ export default {
|
|||
serviceZipCode: String,
|
||||
selectedAppointmentType: String,
|
||||
cmsWidgetName: String,
|
||||
shopQuestionData: {
|
||||
shopQuestionInitialData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
validationRules: String,
|
||||
},
|
||||
components: {
|
||||
alert,
|
||||
buttonQuestion,
|
||||
textLink,
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
|
|
@ -102,31 +97,26 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
loadInitialData() {
|
||||
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
|
||||
serviceZipCode: this.serviceZipCode,
|
||||
});
|
||||
},
|
||||
async updateShopList() {
|
||||
const result = await this.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
|
||||
serviceZipCode: this.serviceZipCode,
|
||||
});
|
||||
|
||||
this.resetShopList();
|
||||
|
||||
return result.data;
|
||||
initializeComponent(shopQuestionInitialData) {
|
||||
this.shops = shopQuestionInitialData;
|
||||
},
|
||||
shopIterator(array, n) {
|
||||
let l = array.length;
|
||||
return () => {
|
||||
var end = this.shopIndex + n;
|
||||
var part = array.slice(this.shopIndex, end);
|
||||
this.shopIndex = end < l ? end : this.shops.length;
|
||||
return part;
|
||||
getNextShopsFromList(numberToGet = 3) {
|
||||
const shopIterator = (array, n) => {
|
||||
let l = array.length;
|
||||
return () => {
|
||||
var end = this.shopIndex + n;
|
||||
var part = array.slice(this.shopIndex, end);
|
||||
this.shopIndex = end < l ? end : this.shops.length;
|
||||
return part;
|
||||
};
|
||||
};
|
||||
},
|
||||
async getNextShopsFromList() {
|
||||
const nextShop = this.shopIterator(this.shops, 3);
|
||||
|
||||
const nextShop = shopIterator(this.shops, numberToGet);
|
||||
|
||||
// Map API result data
|
||||
const mappedData = nextShop().map((shop) => {
|
||||
|
|
@ -147,70 +137,68 @@ export default {
|
|||
});
|
||||
}
|
||||
|
||||
await this.$nextTick();
|
||||
|
||||
if (this.shopIndex == this.shops.length) {
|
||||
this.displaySeeMoreLocationsLink = false;
|
||||
} else {
|
||||
this.displaySeeMoreLocationsLink = true;
|
||||
}
|
||||
|
||||
await this.$nextTick();
|
||||
|
||||
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
|
||||
|
||||
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
|
||||
|
||||
this.$nextTick().then(() => {
|
||||
if (this.shopIndex == this.shops.length) {
|
||||
this.displaySeeMoreLocationsLink = false;
|
||||
} else {
|
||||
this.displaySeeMoreLocationsLink = true;
|
||||
}
|
||||
|
||||
this.$nextTick().then(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
});
|
||||
},
|
||||
resetShopList() {
|
||||
this.answers = [];
|
||||
this.shopIndex = 0;
|
||||
this.getNextShopsFromList();
|
||||
|
||||
this.displaySeeMoreLocationsLink = true;
|
||||
this.selectedValue = "";
|
||||
this.$refs.buttonQuestion.resetField();
|
||||
},
|
||||
scrollToBottom() {
|
||||
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
|
||||
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
|
||||
},
|
||||
},
|
||||
// mounted() {
|
||||
// console.log(this.shopQuestionData);
|
||||
// this.shops = this.shopQuestionData;
|
||||
// this.getNextShopsFromList();
|
||||
// console.log(this.shops);
|
||||
// },
|
||||
watch: {
|
||||
serviceZipCode: {
|
||||
async handler() {
|
||||
this.shops = await this.updateShopList();
|
||||
handler(newValue) {
|
||||
this.loadInitialData(newValue).then((result) => {
|
||||
this.initializeComponent(result.data);
|
||||
this.resetShopList();
|
||||
});
|
||||
},
|
||||
},
|
||||
selectedAppointmentType: {
|
||||
async handler(newValue, oldValue) {
|
||||
if (oldValue == undefined) {
|
||||
this.shops = this.shopQuestionData;
|
||||
this.getNextShopsFromList();
|
||||
this.displaySeeMoreLocationsLink = true;
|
||||
return;
|
||||
handler(newValue) {
|
||||
// If the validation has been previously triggered, clear it before displaying the component
|
||||
this.$refs.buttonQuestion.resetField();
|
||||
|
||||
if (newValue != null) {
|
||||
this.$nextTick().then(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
}
|
||||
|
||||
await this.$nextTick();
|
||||
|
||||
const container = document.getElementsByClassName(
|
||||
"page-container-grouped-styles"
|
||||
)[0];
|
||||
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
|
||||
|
||||
this.resetShopList();
|
||||
},
|
||||
},
|
||||
shopQuestionData: {
|
||||
shops: {
|
||||
handler(newValue) {
|
||||
console.log(newValue)
|
||||
this.shops = newValue;
|
||||
this.getNextShopsFromList();
|
||||
this.$refs.buttonQuestion.resetField();
|
||||
const selectedShopIndex = newValue.findIndex((provider) => provider.providerNumber == this.modelValue);
|
||||
if (selectedShopIndex >= 3) {
|
||||
this.getNextShopsFromList(selectedShopIndex + 1);
|
||||
} else {
|
||||
this.getNextShopsFromList();
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
alert,
|
||||
buttonQuestion,
|
||||
textLink,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,38 +24,35 @@ import { applicationConfig } from "../constants/application-config";
|
|||
export default {
|
||||
methods: {
|
||||
logPageView(pageEvent) {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
var payload = {
|
||||
userId: getDeviceIdValue(),
|
||||
sessionKey: getSessionKeyValue(),
|
||||
pageName: currentPageName,
|
||||
sessionId: getSessionIdValue(),
|
||||
action: "",
|
||||
event: pageEvent,
|
||||
shouldUseSessionId: false,
|
||||
experimentsForUser: store.getters.applicationUser.experiments,
|
||||
};
|
||||
|
||||
baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
|
||||
// const currentPageName = getPageNameByQueryString();
|
||||
// var payload = {
|
||||
// userId: getDeviceIdValue(),
|
||||
// sessionKey: getSessionKeyValue(),
|
||||
// pageName: currentPageName,
|
||||
// sessionId: getSessionIdValue(),
|
||||
// action: "",
|
||||
// event: pageEvent,
|
||||
// shouldUseSessionId: false,
|
||||
// experimentsForUser: store.getters.applicationUser.experiments,
|
||||
// };
|
||||
// baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false);
|
||||
},
|
||||
|
||||
logCustomEvent(category, action, label, value) {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
|
||||
var payload = {
|
||||
userId: getDeviceIdValue(),
|
||||
sessionKey: getSessionKeyValue(),
|
||||
pageName: currentPageName,
|
||||
sessionId: getSessionIdValue(),
|
||||
category: category,
|
||||
action: action,
|
||||
label: label,
|
||||
value: value,
|
||||
shouldUseSessionId: false,
|
||||
experimentsForUser: store.getters.applicationUser.experiments,
|
||||
};
|
||||
|
||||
baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
|
||||
// const currentPageName = getPageNameByQueryString();
|
||||
// var payload = {
|
||||
// userId: getDeviceIdValue(),
|
||||
// sessionKey: getSessionKeyValue(),
|
||||
// pageName: currentPageName,
|
||||
// sessionId: getSessionIdValue(),
|
||||
// category: category,
|
||||
// action: action,
|
||||
// label: label,
|
||||
// value: value,
|
||||
// shouldUseSessionId: false,
|
||||
// experimentsForUser: store.getters.applicationUser.experiments,
|
||||
// };
|
||||
// baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
|
||||
},
|
||||
|
||||
pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue