diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 9154383cd..bd9ae6d9a 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -22,7 +22,6 @@
-
SundayS
MondayM
TuesdayT
@@ -84,7 +83,6 @@ export default { months: null, disableViewMoreDatesButton: false, selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based) - today: null, hideSomeDaysForInitialView: null, }; }, @@ -112,6 +110,12 @@ export default { }, }, computed: { + today() { + if (this.todayOverrideDateString) { + return new Date(this.todayOverrideDateString); + } + return new Date(); + }, todayMonthIndex() { return this.today.getMonth() + 1; }, @@ -151,39 +155,31 @@ export default { this.$emit("date-clicked"); }, getWeekStartDate(date) { - // Get the day of the week for date - let dayOfWeek = date.getDay(); - + const dayOfWeek = date.getDay(); // Subtract the day of the week from date to get the date of Sunday - let sunday = new Date(date); + const sunday = new Date(date); sunday.setDate(sunday.getDate() - dayOfWeek); - - // Return the date of Sunday return sunday; }, getWeekEndDate(date) { - const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.) - const daysUntilSaturday = 6 - currentDay; // Calculate the number of days until Saturday - + const dayOfWeek = date.getDay(); + const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday // Clone the given date and add the remaining days until Saturday const saturday = new Date(date); saturday.setDate(date.getDate() + daysUntilSaturday); - return saturday; }, getNextWeekSunday(date) { - const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.) - const daysUntilNextSunday = currentDay === 0 ? 7 : 7 - currentDay; // Calculate the number of days until the next Sunday - + const dayOfWeek = date.getDay(); + const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday // Clone the given date and add the remaining days until Sunday const nextSunday = new Date(date); nextSunday.setDate(date.getDate() + daysUntilNextSunday); - return nextSunday; }, getInitialViewWeeks(today, initialViewRowsToShow) { - // TODO: this only is for future direction; create logic for past direction - let weeks = []; + // TODO: this only is for future direction; need to create logic for past direction + const weeks = []; let weekStartDate = this.getWeekStartDate(today); let weekEndDate = this.getWeekEndDate(today); for (let i = 0; i < initialViewRowsToShow; i++) { @@ -200,14 +196,19 @@ export default { return weeks; }, async loadInitialData(config) { - // CALLED FROM CONSUMING COMPONENT BEFORE DATE-PICKER APPEARS - const todayDate = config.todayOverrideDateString - ? new Date(config.todayOverrideDateString) - : new Date(); + let todayDate; + if (this.today) { + todayDate = this.today; + } else if (config.todayOverrideDateString) { + todayDate = new Date(config.todayOverrideDateString); + } else { + todayDate = new Date(); + } - let todayMonthIndex = todayDate.getMonth() + 1; - let todayYearNum = todayDate.getFullYear(); - let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1); + const todayMonthIndex = todayDate.getMonth() + 1; + const todayYearNum = todayDate.getFullYear(); + // TODO - set up currentMonthStart if direction is PAST: + // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1); let currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0); let calendarViewDirection = "none"; @@ -219,10 +220,10 @@ export default { config.initialViewRowsToShow ); - let initialViewStartDate = todayDate; - let initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate; - let saturday1month = initialViewWeeks[0].weekEndDate.getMonth(); - let sunday5month = + const initialViewStartDate = todayDate; + const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate; + const saturday1month = initialViewWeeks[0].weekEndDate.getMonth(); + const sunday5month = initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth(); let hideSomeDaysForInitialView = false; @@ -284,9 +285,9 @@ export default { // Growing from 0 to 1 time = Math.min(1, (timestamp - start) / duration); - let percentageNew = timingFunc(time); - let distanceToGo = targetY; - let thisDistance = percentageNew * distanceToGo; + const percentageNew = timingFunc(time); + const distanceToGo = targetY; + const thisDistance = percentageNew * distanceToGo; wrapper.scrollTo(0, initY + thisDistance); @@ -305,13 +306,12 @@ export default { }, async setCalendarData(config = {}) { - this.today = config.todayDate; this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView; - let hideSecondMonth = config.hideSecondMonth; + const hideSecondMonth = config.hideSecondMonth; const direction = config.calendarViewDirection; - const monthsAfterToLoadOffset = 12; // TO BE MADE "CONSTANTS" - const monthsBeforeToLoadOffset = 36; // TO BE MADE "CONSTANTS" + const monthsAfterToLoadOffset = 12; + const monthsBeforeToLoadOffset = 36; config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => { this.selectableDatesData.push(selectableDate); }); @@ -382,25 +382,25 @@ export default { } } - const monthEndDate = new Date(yearNum, monthIndex, 0); // BOTH - let monthEndDateNum = monthEndDate.getDate(); // BOTH + const monthEndDate = new Date(yearNum, monthIndex, 0); + let monthEndDateNum = monthEndDate.getDate(); if ( offset === 0 && calendarViewDirection === "past" && monthEndDateNum > this.currentWeekEndDateNum ) { - monthEndDateNum = this.currentWeekEndDateNum; // PAST + monthEndDateNum = this.currentWeekEndDateNum; } const monthStartDateNum = offset === 0 && calendarViewDirection === "future" ? this.currentWeekStartDateNum - : 1; // FUTURE - const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum); // BOTH + : 1; + const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum); - const startDateDayIndex = monthStartDate.getDay(); // FUTURE - const endDateDayIndex = monthEndDate.getDay(); // PAST + const startDateDayIndex = monthStartDate.getDay(); + const endDateDayIndex = monthEndDate.getDay(); if (Math.abs(offset) === 1 && hideSecondMonth) { monthClass = monthClass + " month-hidden"; @@ -424,7 +424,7 @@ export default { // populate dates array for (let i = monthStartDateNum; i <= monthEndDateNum; i++) { let dayClasses = ""; - let dateString = + const dateString = yearNum.toString() + "-" + forceTwoDigitString(monthIndex) + @@ -514,7 +514,7 @@ export default { monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString ); this.isLoading = false; - this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this removes hidden styling on days + this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", ""); this.scrollToElement(monthToShow.monthString); diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 3a608f3a0..2deb126e5 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -1,7 +1,7 @@ @@ -10,12 +10,7 @@ export default { name: "textBlock", props: { customText: String, // used to allow the insert of token values into textblock - justifyText: String, // left, right, center - margin: { - // bootstrap margin to apply to the block. - type: String, - default: "mt-2", - }, + justifyText: String, // right, center (left is default) typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation) fontWeight: String, // bold=500, default is 400 cmsWidgetName: String, @@ -33,15 +28,11 @@ export default { diff --git a/src/layouts/review/review.spec.js b/src/layouts/review/review.spec.js deleted file mode 100644 index 674dc71f7..000000000 --- a/src/layouts/review/review.spec.js +++ /dev/null @@ -1,3 +0,0 @@ -describe("Review Page", () => { - test.todo("Add more tests as specific functionality is added."); -}); diff --git a/src/layouts/review/review.vue b/src/layouts/review/review.vue deleted file mode 100644 index 9bccb2014..000000000 --- a/src/layouts/review/review.vue +++ /dev/null @@ -1,102 +0,0 @@ - - - - - diff --git a/src/layouts/schedule/location-alerts/location-alerts.vue b/src/layouts/schedule/location-alerts/location-alerts.vue new file mode 100644 index 000000000..0f8c7b46d --- /dev/null +++ b/src/layouts/schedule/location-alerts/location-alerts.vue @@ -0,0 +1,53 @@ + + diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 6c859c68b..91e685dbf 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -18,24 +18,13 @@ - - + - // Components -import alert from "@/ux-components/alert/alert"; 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, defineRule } from "vee-validate"; import datePicker from "@/digital-components/date-picker/date-picker"; +import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts"; import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question"; // Supporting files @@ -78,7 +67,6 @@ 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 { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper"; import { doesCopyContainRouterLink, splitCopyOnCMSPlaceHolder, @@ -130,7 +118,6 @@ export default { isPremiumAppointment: null, }, selectableDatesData: [], - weatherAlerts: [], mobilePremiumAppointmentFee: null, }; }, @@ -142,22 +129,6 @@ export default { selectableDatesSetting: "custom", initialViewRowsToShow: 5, customSelectableDatesCallback: getAvailableDates, - - /* vvvvv SAVE THESE FOR TESTING PURPOSES FOR NOW vvvvv - - // todayOverrideDateString: "2023-04-29T03:00:00", // show partial - // todayOverrideDateString: "2023-04-30T03:00:00", // - // todayOverrideDateString: "2023-05-02T03:00:00", // ONE MONTH ONLY - // todayOverrideDateString: "2023-05-06T03:00:00", // ONE MONTH ONLY - // todayOverrideDateString: "2023-05-07T03:00:00", // show partial - // todayOverrideDateString: "2023-05-30T03:00:00", // - // todayOverrideDateString: "2023-06-30T03:00:00", // - // todayOverrideDateString: "2023-07-01T03:00:00", // show partial && ONE MONTH ONLY - // todayOverrideDateString: "2023-07-02T03:00:00", // ONE MONTH ONLY - // todayOverrideDateString: "2023-07-12T03:00:00", // show partial - // todayOverrideDateString: "2023-08-31T03:00:00", - // todayOverrideDateString: "2023-09-30T03:00:00", // show partial - */ }); // Price EARLY BIRD pre-emptively to allow for asynchronous call to pricing @@ -172,7 +143,9 @@ export default { const premiumFeePromise = baseMixin.methods.dispatchStoreAction( storeActions.GET_MOBILE_EARLY_BIRD_FEE ); - const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu); + const alertReasonsPromise = locationAlerts.methods.loadInitialData( + store.getters.order.serviceLocation.zipCodeCtu + ); // Settle promises and get results const promiseResultMap = [ @@ -203,8 +176,8 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.setData(resultMap.alertReasons); vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData); + vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse; if (resultMap.premiumFee) { vm.mobilePremiumAppointmentFee = resultMap.pricingResults[0]; @@ -219,9 +192,6 @@ export default { // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText); }, - displayWeatherAlert() { - return this.weatherAlerts.length > 0; - }, appointmentType() { return this.$store.getters.order.serviceLocation.appointmentType; }, @@ -273,34 +243,6 @@ export default { ); return newShopTimeSlots; }, - setData(alertReasonsData) { - if (alertReasonsData) { - this.convertReasonsToCmsAlerts(alertReasonsData); - } - }, - cmsHeadlineTextFound(widgetName) { - return this.getCmsContent(widgetName, "HeadlineText") !== ""; - }, - convertReasonsToCmsAlerts(data) { - this.weatherAlerts = data.reduce((newObj, alert) => { - newObj.push({ - cmsWidgetName: `LocationAlert-${alert}`, - alertReason: alert, - }); - return newObj; - }, []); - }, - async getWeatherAlertReasons(ctu) { - await getAlertReasons(ctu) - .then((response) => { - if (response.data) { - this.convertReasonsToCmsAlerts(response.data); - } - }) - .catch(() => { - console.log("error fetching alert reasons.."); - }); - }, getServiceZipCtuCodeFromStore() { return store.getters.order.serviceLocation.zipCodeCtu; }, @@ -350,15 +292,14 @@ export default { }, }, components: { - alert, funnelHeader, funnelFooter, funnelSubHeader, Form, loadingModal, datePicker, + locationAlerts, timeSlotModalQuestion, }, - mounted() {}, }; diff --git a/src/layouts/service-location/shop-question/shop-question.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js index c61fe2720..c4efdea91 100644 --- a/src/layouts/service-location/shop-question/shop-question.spec.js +++ b/src/layouts/service-location/shop-question/shop-question.spec.js @@ -179,19 +179,19 @@ describe("shop-question.vue", () => { expect(wrapper.vm.answers).toEqual([ { buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081", - buttonLabel: "4403 Executive Pkwy", + buttonLabel: "Westerville", buttonLabelSubCopy: "5 mi", value: "003335", }, { buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", - buttonLabel: "760 Dearborn Park Ln", + buttonLabel: "Worthington", buttonLabelSubCopy: "10.5 mi", value: "001820", }, { buttonBodyCopy: "5015 N High St, Columbus, OH 43214", - buttonLabel: "5015 N High St", + buttonLabel: "Columbus", buttonLabelSubCopy: "11.5 mi", value: "003343", }, @@ -320,19 +320,19 @@ describe("shop-question.vue", () => { const displayedAnswers = [ { buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081", - buttonLabel: "4403 Executive Pkwy", + buttonLabel: "Westerville", buttonLabelSubCopy: "5 mi", value: "003335", }, { buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", - buttonLabel: "760 Dearborn Park Ln", + buttonLabel: "Worthington", buttonLabelSubCopy: "10.5 mi", value: "001820", }, { buttonBodyCopy: "5015 N High St, Columbus, OH 43214", - buttonLabel: "5015 N High St", + buttonLabel: "Columbus", buttonLabelSubCopy: "11.5 mi", value: "003343", }, @@ -388,37 +388,37 @@ describe("shop-question.vue", () => { expect(wrapper.vm.answers).toEqual([ { buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081", - buttonLabel: "4403 Executive Pkwy", + buttonLabel: "Westerville", buttonLabelSubCopy: "5 mi", value: "003335", }, { buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", - buttonLabel: "760 Dearborn Park Ln", + buttonLabel: "Worthington", buttonLabelSubCopy: "10.5 mi", value: "001820", }, { buttonBodyCopy: "5015 N High St, Columbus, OH 43214", - buttonLabel: "5015 N High St", + buttonLabel: "Columbus", buttonLabelSubCopy: "11.5 mi", value: "003343", }, { buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223", - buttonLabel: "1670 Harmon Ave", + buttonLabel: "Columbus", buttonLabelSubCopy: "16 mi", value: "006747", }, { buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065", - buttonLabel: "3938 Powell Rd", + buttonLabel: "Powell", buttonLabelSubCopy: "16.5 mi", value: "003341", }, { buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228", - buttonLabel: "4580 W Broad St", + buttonLabel: "Columbus", buttonLabelSubCopy: "19.5 mi", value: "003342", }, diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index fffb36c49..3183cbc9e 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -143,7 +143,7 @@ export default { const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2; return { - buttonLabel: streetAddress, + buttonLabel: city, buttonLabelSubCopy: `${distanceInMiles} mi`, buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`, value: shopProvider.providerNumber, diff --git a/src/router/index.js b/src/router/index.js index 86c402187..15ba52647 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -28,27 +28,7 @@ import analyticsMixin from "@/mixins/analytics-mixin"; import { experimentTriggers } from "../constants/experiments"; import { applicationConfig } from "../constants/application-config"; -// Components -import datePicker from "@/digital-components/date-picker/date-picker.vue"; -import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue"; -import review from "@/layouts/review/review"; - const routes = [ - { - path: "/demo-date-picker", // This is a temporary route for testing. - name: "demo-date-picker", - component: demoDatePicker, - }, - { - path: "/date-picker", // This is a temporary route for testing. - name: "date-picker", - component: datePicker, - }, - { - path: "/review", // This is a temporary route for testing. - name: "review", - component: review, - }, { path: "/", name: "root",