CSR-1131: preliminary work on getting API call from schedule page to date picker
This commit is contained in:
Adam Caouette
parent
9179506df8
commit
a355b025c1
5 changed files with 319 additions and 97 deletions
|
|
@ -94,6 +94,11 @@ const endpoints = {
|
|||
url: "/parts/api/v1/parts/part-from-capability-answer",
|
||||
method: "POST",
|
||||
},
|
||||
GetShopTimeSlots: {
|
||||
url: "/schedule/api/v1/schedule/shop-time-slots",
|
||||
mockUrl: "https://mockey.qa.sagaws.net/service/shop-time-slots", // TODO: REMOVE MOCKURL
|
||||
method: "POST",
|
||||
},
|
||||
SaveSession: {
|
||||
url: "/order/api/v1/order/save-session",
|
||||
method: "POST",
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ const storeActions = {
|
|||
GET_MOLDING_QUESTIONS: "getMoldingQuestions",
|
||||
GET_MOBILE_FEE_PART: "getMobileFeePart",
|
||||
GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
|
||||
GET_SHOP_TIME_SLOTS: "getShopTimeSlots",
|
||||
SAVE_SESSION: "saveSession",
|
||||
LOAD_SESSION: "loadSession",
|
||||
UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
|
||||
|
|
|
|||
|
|
@ -1,55 +1,58 @@
|
|||
<template>
|
||||
<div class="date-picker text-center" :class="calendarViewDirection">
|
||||
<fieldset v-if="months">
|
||||
<!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
|
||||
<!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
|
||||
<!-- <p style="text-align: left">months: {{ months }}</p> -->
|
||||
<fieldset v-if="months" id="date-picker-fieldset">
|
||||
<legend class="sr-only">Date Picker</legend>
|
||||
<h4 id="tracker">currentScrollTop: {{ currentScrollTop }}</h4>
|
||||
<div
|
||||
v-for="month in months"
|
||||
:key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
|
||||
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
||||
class="calendar-grid-container position-relative"
|
||||
:class="[
|
||||
isInitialView === true ? 'initial-view' : '',
|
||||
month.monthClass,
|
||||
isAddingNewMonth === true ? 'is-adding-new-month' : '',
|
||||
]">
|
||||
<div class="month-year body-small d-flex align-items-center small">
|
||||
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
||||
</div>
|
||||
<div
|
||||
class="calendar-grid-container position-relative"
|
||||
v-if="calendarViewDirection === 'future'"
|
||||
class="legend caption d-flex align-items-center justify-content-end">
|
||||
<span class="legend-circle me-1"></span> = Available
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
<div class="nav-back ps-3"><button></button></div>
|
||||
<div class="nav-forward pe-3"><button></button></div>
|
||||
<!-- Do the days of the weeek need to be read? -->
|
||||
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
||||
<div
|
||||
v-for="date in month.dates"
|
||||
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
|
||||
class="grid-item radio-wrapper"
|
||||
:class="[
|
||||
isInitialView === true ? 'initial-view' : '',
|
||||
month.monthClass,
|
||||
isAddingNewMonth === true ? 'is-adding-new-month' : '',
|
||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||
date.dayClasses,
|
||||
]">
|
||||
<div class="month-year body-small d-flex align-items-center small">
|
||||
{{ month.monthLabel }} {{ month.yearNum.toString() }}
|
||||
</div>
|
||||
<div
|
||||
v-if="calendarViewDirection === 'future'"
|
||||
class="legend caption d-flex align-items-center justify-content-end">
|
||||
<span class="legend-circle me-1"></span> = Available
|
||||
</div>
|
||||
<div class="separator-line"></div>
|
||||
<div class="nav-back ps-3"><button></button></div>
|
||||
<div class="nav-forward pe-3"><button></button></div>
|
||||
<!-- Do the days of the weeek need to be read? -->
|
||||
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
||||
<div
|
||||
v-for="date in month.dates"
|
||||
:key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
|
||||
class="grid-item radio-wrapper"
|
||||
:class="[
|
||||
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
||||
date.dayClasses,
|
||||
]">
|
||||
<input
|
||||
:disabled="!isSelectableDate(date.inputValue)"
|
||||
type="radio"
|
||||
name="day-of-month"
|
||||
v-model="selectedDate"
|
||||
:value="date.inputValue"
|
||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<span>{{ date.dateNum.toString() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
:disabled="!isSelectableDate(date.inputValue)"
|
||||
type="radio"
|
||||
name="day-of-month"
|
||||
v-model="selectedDate"
|
||||
:value="date.inputValue"
|
||||
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
||||
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
||||
<span>{{ date.dateNum.toString() }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -76,7 +79,7 @@ export default {
|
|||
name: "datePicker",
|
||||
data() {
|
||||
return {
|
||||
calendarData: [],
|
||||
// calendarData: [],
|
||||
monthsBeforeToLoadOffset: 0,
|
||||
monthsAfterToLoadOffset: 1,
|
||||
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
||||
|
|
@ -84,10 +87,21 @@ export default {
|
|||
initialViewRowsToShow: 5,
|
||||
initialViewRowsTally: 0,
|
||||
isAddingNewMonth: false,
|
||||
|
||||
savedHeight: 0,
|
||||
newestMonthId: "",
|
||||
currentScrollTop: 0,
|
||||
months: null, // NEW
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setCalendarData();
|
||||
// this.trackScrollTop();
|
||||
},
|
||||
|
||||
props: {
|
||||
selectableDates: {
|
||||
selectableDatesSetting: {
|
||||
type: String,
|
||||
validator(value) {
|
||||
return Object.values(SelectableDaysOptions).includes(value);
|
||||
|
|
@ -105,6 +119,7 @@ export default {
|
|||
customSelectableDatesCallback: {
|
||||
type: Function,
|
||||
default() {
|
||||
// console.log(" running default...")
|
||||
return [];
|
||||
},
|
||||
},
|
||||
|
|
@ -115,15 +130,16 @@ export default {
|
|||
? new Date(this.todayOverrideDateString)
|
||||
: new Date();
|
||||
},
|
||||
months() {
|
||||
if (this.calendarData?.length < 1) {
|
||||
this.setCalendarData();
|
||||
}
|
||||
return this.calendarData;
|
||||
},
|
||||
// months() {
|
||||
// if (this.calendarData?.length < 1) {
|
||||
// this.setCalendarData();
|
||||
// }
|
||||
// console.log("( ( (( ( ()))))) MONTHS READY")
|
||||
// return this.calendarData;
|
||||
// },
|
||||
calendarViewDirection() {
|
||||
if (this.selectableDates === "past") return "past";
|
||||
if (this.selectableDates === "custom") return "future";
|
||||
if (this.selectableDatesSetting === "past") return "past";
|
||||
if (this.selectableDatesSetting === "custom") return "future";
|
||||
return "none";
|
||||
},
|
||||
selectedDate: {
|
||||
|
|
@ -136,6 +152,12 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
// setMonths() { /// NEW, ONLY RUN ON MOUNTED?
|
||||
// if (this.months?.length < 1) { // DO I NEED THIS CHECK, IF ONLY TRIGGERED WITH MOUNTED HOOK NOW?
|
||||
// this.setCalendarData();
|
||||
// }
|
||||
// // this.months = this.calendarData;
|
||||
// },
|
||||
goForward() {
|
||||
if (this.isInitialView) {
|
||||
this.isInitialView = false; // 1st click removes hidden styling
|
||||
|
|
@ -143,13 +165,16 @@ export default {
|
|||
this.addMonthData(); // 2nd click adds 1 month data
|
||||
}
|
||||
},
|
||||
setCalendarData() {
|
||||
async setCalendarData() {
|
||||
// console.log(" running setCalendarData.")
|
||||
// this.selectableDatesData = this.selectableDates; // POPULATE DATA FROM PROP
|
||||
|
||||
// GENERATE MONTHS AND PUSH THEM INTO ARRAY
|
||||
const months = [];
|
||||
if (this.calendarViewDirection === "future") {
|
||||
// first 0, then 1
|
||||
for (let i = 0; i <= this.monthsAfterToLoadOffset; i++) {
|
||||
months.push(this.getMonthData(i));
|
||||
months.push(await this.getMonthData(i));
|
||||
}
|
||||
} else if (this.calendarViewDirection === "past") {
|
||||
// first 0, then -1
|
||||
|
|
@ -162,9 +187,11 @@ export default {
|
|||
// months.push(this.getMonthDataPAST(i));
|
||||
// }
|
||||
}
|
||||
this.calendarData = months;
|
||||
// this.calendarData = months;
|
||||
this.months = months;
|
||||
// console.log(" MONTHS are done ")
|
||||
},
|
||||
getMonthData(offset) {
|
||||
async getMonthData(offset) {
|
||||
const direction = this.calendarViewDirection; // "past" or "future"
|
||||
let yearNum;
|
||||
let monthIndex;
|
||||
|
|
@ -198,7 +225,7 @@ export default {
|
|||
|
||||
if (direction === "future") {
|
||||
// get last day of current calendar data
|
||||
const lastMonthInCalendarData = this.calendarData[this.calendarData.length - 1];
|
||||
const lastMonthInCalendarData = this.months[this.months.length - 1];
|
||||
|
||||
if (lastMonthInCalendarData.monthIndex === 11) {
|
||||
monthIndex = 0;
|
||||
|
|
@ -210,7 +237,7 @@ export default {
|
|||
}
|
||||
if (direction === "past") {
|
||||
// get last day of current calendar data
|
||||
const firstMonthInCalendarData = this.calendarData[0];
|
||||
const firstMonthInCalendarData = this.months[0];
|
||||
|
||||
if (firstMonthInCalendarData.monthIndex === 0) {
|
||||
monthIndex = 11;
|
||||
|
|
@ -281,7 +308,7 @@ export default {
|
|||
monthClass = monthClass + " new-month";
|
||||
}
|
||||
|
||||
if (this.selectableDates === "custom") {
|
||||
if (this.selectableDatesSetting === "custom") {
|
||||
const monthStart = {
|
||||
year: yearNum,
|
||||
month: monthIndex + 1,
|
||||
|
|
@ -293,18 +320,27 @@ export default {
|
|||
date: monthEndDateNum,
|
||||
};
|
||||
// get available dates
|
||||
this.updateSelectableDates(monthStart, monthEnd);
|
||||
await this.updateSelectableDates(monthStart, monthEnd); // v v v v v v
|
||||
// MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
|
||||
}
|
||||
|
||||
function forceTwoDigitString(monthNum) {
|
||||
let newString = monthNum.toString();
|
||||
return (newString.length === 1) ? "0" + newString : newString;
|
||||
}
|
||||
|
||||
// populate datesArray
|
||||
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
|
||||
let dayClasses = "";
|
||||
|
||||
const thisDate = {
|
||||
// NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
||||
year: yearNum,
|
||||
month: monthIndex + 1,
|
||||
date: i,
|
||||
dateString: yearNum.toString() + "-" + forceTwoDigitString(monthIndex + 1) + "-" + forceTwoDigitString(i),
|
||||
};
|
||||
let isSelectableDate = this.isSelectableDate(thisDate);
|
||||
if (offset === 0 && i === todayDateNum) {
|
||||
dayClasses += "current-day";
|
||||
}
|
||||
|
|
@ -320,9 +356,16 @@ export default {
|
|||
if (Math.abs(offset) === 1 && direction === "past" && i < initialViewStartDate) {
|
||||
dayClasses += "day-hidden";
|
||||
}
|
||||
if (this.selectableDates === "custom" && this.isSelectableDate(thisDate)) {
|
||||
if (this.selectableDatesSetting === "custom" && isSelectableDate) {
|
||||
// console.log(" ! ! ! FOUND ONE! A SELECTABLE DATE ! ! ! ! ")
|
||||
dayClasses += " selectable-day";
|
||||
}
|
||||
// // TEMP CHECK
|
||||
// if (offset === 0 && todayDateNum === 21 || offset === 0 && todayDateNum === 26) {
|
||||
// console.log("dayClasses are: ", dayClasses)
|
||||
// }
|
||||
|
||||
// =====
|
||||
const dateObject = {
|
||||
dateNum: i,
|
||||
dayClasses: dayClasses,
|
||||
|
|
@ -340,49 +383,100 @@ export default {
|
|||
monthClass: monthClass,
|
||||
};
|
||||
|
||||
// debugger; // eslint-disable-line no-debugger
|
||||
|
||||
// console.log(" mmm mm m mm m m m MONTH IS READY mm m m m m m m m mmmm m mm")
|
||||
|
||||
return monthToAdd;
|
||||
},
|
||||
addMonthData() {
|
||||
this.isAddingNewMonth = true;
|
||||
async addMonthData() {
|
||||
this.isAddingNewMonth = true; // TODO - DO I NEED THIS ANYMIRE?
|
||||
|
||||
const monthToAdd = await this.getMonthData();
|
||||
|
||||
this.newestMonthId = monthToAdd.monthLabel + "-" + monthToAdd.yearNum?.toString();
|
||||
// console.log("newestMonthId: ", this.newestMonthId)
|
||||
|
||||
const monthToAdd = this.getMonthData();
|
||||
if (this.calendarViewDirection === "future") {
|
||||
let month = this.calendarData[this.calendarData.length - 1];
|
||||
let month = this.months[this.months.length - 1];
|
||||
month.monthClass = month.monthClass.replace("new-month", "");
|
||||
this.calendarData.push(monthToAdd);
|
||||
this.months.push(monthToAdd);
|
||||
}
|
||||
if (this.calendarViewDirection === "past") {
|
||||
let month = this.calendarData[0];
|
||||
let month = this.months[0];
|
||||
month.monthClass = month.monthClass.replace("new-month", "");
|
||||
this.calendarData.unshift(monthToAdd);
|
||||
this.months.unshift(monthToAdd);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.isAddingNewMonth = false;
|
||||
}, 0.010);
|
||||
this.isAddingNewMonth = false;
|
||||
// scroll the next question into view
|
||||
|
||||
// == ATTEMPT 3
|
||||
// this.$nextTick(() => {
|
||||
// // setTimeout(() => {
|
||||
// // this.isAddingNewMonth = false;
|
||||
// // }, 0.010);
|
||||
// setTimeout(() => {
|
||||
// document.querySelector("#April-2023-3")?.scrollIntoView({ behavior: "smooth" });
|
||||
// }, 0.01);
|
||||
// });
|
||||
|
||||
// // scroll the next question into view
|
||||
// this.$nextTick(() => {
|
||||
// setTimeout(() => {
|
||||
// this.isAddingNewMonth = false;
|
||||
// }, 0.010);
|
||||
// setTimeout(() => {
|
||||
// document.querySelector(".new-month")?.scrollIntoView({ behavior: "smooth" });
|
||||
// }, 0.010);
|
||||
// });
|
||||
|
||||
// setTimeout(() => {
|
||||
// this.isAddingNewMonth = false;
|
||||
// }, 0.01);
|
||||
},
|
||||
isSelectableDate(thisDate) {
|
||||
const testForDate = (dateInArray) => {
|
||||
|
||||
// console.log(" running isSelectableDate/testForDate... thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
|
||||
// console.log(" running isSelectableDate/testForDate... dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
|
||||
|
||||
// debugger; // eslint-disable-line no-debugger
|
||||
return (
|
||||
dateInArray.date === thisDate.date &&
|
||||
dateInArray.month === thisDate.month &&
|
||||
dateInArray.year === thisDate.year
|
||||
dateInArray.dateString === thisDate.dateString
|
||||
);
|
||||
};
|
||||
const isSelectable =
|
||||
this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
|
||||
// function testForDateNEW(dateInArray) {
|
||||
|
||||
// console.log(" running isSelectableDate/testForDate... thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
|
||||
// console.log(" running isSelectableDate/testForDate... dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
|
||||
|
||||
// // debugger; // eslint-disable-line no-debugger
|
||||
// return (
|
||||
// dateInArray.date === thisDate.date &&
|
||||
// dateInArray.month === thisDate.month &&
|
||||
// dateInArray.year === thisDate.year
|
||||
// );
|
||||
// }
|
||||
const midTest = this.selectableDatesData.findIndex(testForDate);
|
||||
// console.log("midTest ", midTest)
|
||||
const isSelectable = (this.selectableDatesData.findIndex(testForDate)) > -1 ? true : false;
|
||||
// debugger; // eslint-disable-line no-debugger
|
||||
// console.log("running isSelectableDate... thisDate: ", thisDate, " / isSelectable: ", isSelectable)
|
||||
|
||||
return isSelectable;
|
||||
},
|
||||
updateSelectableDates(monthStart, monthEnd) {
|
||||
this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => {
|
||||
async updateSelectableDates(monthStart, monthEnd) {
|
||||
// console.log("running DP updateSelectableDates... ")
|
||||
const test = await this.customSelectableDatesCallback(monthStart, monthEnd);
|
||||
|
||||
test?.forEach((newObj) => {
|
||||
const index = this.selectableDatesData.findIndex(
|
||||
(obj) =>
|
||||
obj.year === newObj.year &&
|
||||
obj.month === newObj.month &&
|
||||
obj.date === newObj.date
|
||||
(obj) => obj.dateString === newObj.dateString
|
||||
);
|
||||
if (index === -1) this.selectableDatesData.push(newObj);
|
||||
});
|
||||
// console.log("running DP updateSelectableDates... this.selectableDatesData now: ", this.selectableDatesData)
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<!-- <h3>shopTimeSlots: {{ shopTimeSlots }}</h3> -->
|
||||
<div class="page-container-grouped-styles">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<date-picker
|
||||
selectableDates="custom"
|
||||
selectableDatesSetting="custom"
|
||||
v-model="selectedDate"
|
||||
:customSelectableDatesCallback="getAvailableDates" />
|
||||
<funnel-footer
|
||||
|
|
@ -43,6 +44,8 @@ import datePicker from "@/digital-components/date-picker/date-picker";
|
|||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import {
|
||||
|
|
@ -62,29 +65,77 @@ export default {
|
|||
return {
|
||||
selectedDate: null,
|
||||
mockSelectableDatesData: [
|
||||
{ year: 2023, month: 4, date: 13 },
|
||||
{ year: 2023, month: 4, date: 14 },
|
||||
{ year: 2023, month: 4, date: 26 },
|
||||
{ year: 2023, month: 5, date: 4 },
|
||||
{ year: 2023, month: 5, date: 5 },
|
||||
{ year: 2023, month: 5, date: 14 },
|
||||
{ year: 2023, month: 5, date: 21 },
|
||||
{ year: 2023, month: 5, date: 23 },
|
||||
{ year: 2023, month: 5, date: 25 },
|
||||
{ year: 2023, month: 6, date: 11 },
|
||||
{ dateString: "2023-04-28", year: 2023, month: 4, date: 28 },
|
||||
{ dateString: "2023-05-04", year: 2023, month: 5, date: 4 },
|
||||
{ dateString: "2023-05-05", year: 2023, month: 5, date: 5 },
|
||||
{ dateString: "2023-05-14", year: 2023, month: 5, date: 14 },
|
||||
{ dateString: "2023-05-21", year: 2023, month: 5, date: 21 },
|
||||
{ dateString: "2023-05-23", year: 2023, month: 5, date: 23 },
|
||||
{ dateString: "2023-05-25", year: 2023, month: 5, date: 25 },
|
||||
{ dateString: "2023-06-11", year: 2023, month: 6, date: 11 },
|
||||
{ dateString: "2023-06-13", year: 2023, month: 6, date: 13 },
|
||||
{ dateString: "2023-06-17", year: 2023, month: 6, date: 17 },
|
||||
],
|
||||
selectableDatesData: [],
|
||||
};
|
||||
/*
|
||||
shopTimeSlots: {
|
||||
estimatedServiceMinutesMinimum: 120,
|
||||
estimatedServiceMinutesMaximum: 180,
|
||||
days: [
|
||||
{
|
||||
date: "2023-04-25",
|
||||
timeSlots: [
|
||||
{
|
||||
id: 12001400,
|
||||
startTime: "12:00:00Z",
|
||||
endTime: "14:00:00Z",
|
||||
offerPremium: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: "2023-04-26",
|
||||
timeSlots: [
|
||||
{ id: 12001400,
|
||||
startTime: "12:00:00Z",
|
||||
endTime: "14:00:00Z",
|
||||
offerPremium: false,
|
||||
},
|
||||
{ id: 12001400,
|
||||
startTime: "14:30:00Z",
|
||||
endTime: "17:30:00Z",
|
||||
offerPremium: false,
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
*/
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
const getShopTimeSlotsPromise = baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.GET_SHOP_TIME_SLOTS,
|
||||
{
|
||||
startDate: "2023-01-01",
|
||||
endDate: "2023-05-01",
|
||||
shopAppointmentType: "ZZZZ",
|
||||
}
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "shopTimeSlots",
|
||||
promise: getShopTimeSlotsPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
|
@ -92,6 +143,7 @@ export default {
|
|||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.shopTimeSlots = resultMap.shopTimeSlots;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -112,8 +164,43 @@ export default {
|
|||
return true;
|
||||
// NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
|
||||
},
|
||||
getAvailableDates(startDate, endDate) {
|
||||
return this.mockSelectableDatesData;
|
||||
async getAvailableDates(startDate, endDate) {
|
||||
// console.log("S- async getAvailableDates");
|
||||
|
||||
// USING DATES PASSED, MAKE AN API CALL
|
||||
const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.GET_SHOP_TIME_SLOTS,
|
||||
{
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
shopAppointmentType: "ZZZZ",
|
||||
},
|
||||
false
|
||||
);
|
||||
const newShopTimeSlots = newShopTimeSlotsResponse.data;
|
||||
// console.log("newShopTimeSlots ", newShopTimeSlots)
|
||||
|
||||
// ADD API CALL RESULTS TO EXISTING DATE DATA
|
||||
const currentData = [
|
||||
...this.selectableDatesData,
|
||||
this.convertApiResponse(newShopTimeSlots.days),
|
||||
];
|
||||
|
||||
// RETURN ALL THE DATE DATA (THE AGGREGATE)
|
||||
return this.mockSelectableDatesData; // TODO REMOVE MOCK DATA
|
||||
// return currentData;
|
||||
},
|
||||
convertApiResponse(responseData) {
|
||||
// DATA CONVERSION
|
||||
responseData?.forEach((date) => {
|
||||
const dateString = date.date;
|
||||
date.dateString = dateString;
|
||||
const dateStringPieces = dateString.split("-");
|
||||
date.year = Number(dateStringPieces[0]);
|
||||
date.month = Number(dateStringPieces[1]);
|
||||
date.date = Number(dateStringPieces[2]);
|
||||
});
|
||||
return responseData;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
|
|
|
|||
|
|
@ -993,6 +993,41 @@ export const actions = {
|
|||
});
|
||||
},
|
||||
|
||||
getShopTimeSlots(
|
||||
context,
|
||||
{ startDate = "2023-01-01", endDate = "2023-05-01", shopAppointmentType = "" }
|
||||
) {
|
||||
const order = context.state.order;
|
||||
const mockArray = [];
|
||||
|
||||
var payload = {
|
||||
providerNumber: order.providerNumber,
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
shopAppointmentType: shopAppointmentType,
|
||||
applicationName: applicationConfig.APPLICATION_NAME,
|
||||
parentAccountNumber: context.getters.payment.parentAccountNumber,
|
||||
carId: context.getters.vehicle.carId,
|
||||
partNumbers: mockArray, // TODO: WHERE DO I GET THIS?
|
||||
eon: order.eon,
|
||||
provisionalReasons: mockArray, // TODO: WHERE DO I GET THIS?
|
||||
};
|
||||
|
||||
// TODO: REMOVE MOCK CALL & USE REAL CALL BELOW
|
||||
return globalMethods.callMockHttpClient({
|
||||
method: endpoints.GetShopTimeSlots.method,
|
||||
endpoint: endpoints.GetShopTimeSlots.mockUrl,
|
||||
payload: payload,
|
||||
});
|
||||
// TODO: RESTORE THIS
|
||||
// return globalMethods.callHttpClient({
|
||||
// method: endpoints.GetShopTimeSlots.method,
|
||||
// endpoint: endpoints.GetShopTimeSlots.url,
|
||||
// payload: payload,
|
||||
// logApiCall: false,
|
||||
// });
|
||||
},
|
||||
|
||||
// Session API Actions
|
||||
saveSession(context) {
|
||||
const vehicle = context.getters.vehicle;
|
||||
|
|
|
|||
Loading…
Reference in a new issue