diff --git a/src/constants/analytics.js b/src/constants/analytics.js index fe43be06d..00088baa7 100644 --- a/src/constants/analytics.js +++ b/src/constants/analytics.js @@ -14,6 +14,7 @@ const GaCategories = { EVOX: "Evox", APPOINTMENT: "Appointment", SERVICE_LOCATION: "service-location", + CONFIRMATION_CLICKED: "confirmation clicked", }; const GaActions = { @@ -26,6 +27,8 @@ const GaActions = { MOBILE_AVAILABLE: "mobile_available", SHOPS_FIRST_DISPLAYED: "shops_first_displayed", MORE_LOCATIONS_CLICKED: "more_locations_clicked", + YES: "yes", + NO: "no", }; const GaLabels = { diff --git a/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue b/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue index 1ef9fbc54..4e6b439e8 100644 --- a/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue +++ b/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue @@ -50,7 +50,7 @@ export default { data() { return { isModalOpen: false, - selectedAppontment: { + selectedAppointment: { estimatedServiceMinutes: { minimum: null, maximum: null, @@ -58,6 +58,7 @@ export default { timeSlot: null, date: null, }, + confirmedAppointment: false, }; }, methods: { @@ -67,22 +68,25 @@ export default { this.modal.openModal(); }, onModalClosed() { + this.pushEvent(); this.$emit("close-mobile-first-modal"); + this.confirmedAppointment = false; }, closeModal() { this.modal.closeModal(); }, confirmAppointment() { let selectedTimeSlot = { - timeSlot: this.selectedAppontment.timeSlot, - routeCode: this.selectedAppontment.timeSlot.id, - date: this.selectedAppontment.date, + timeSlot: this.selectedAppointment.timeSlot, + routeCode: this.selectedAppointment.timeSlot.id, + date: this.selectedAppointment.date, }; + this.confirmedAppointment = true; this.$emit("confirm-appointment", selectedTimeSlot); this.modal.closeModal(); }, setSelectedAppointment(appointment) { - this.selectedAppontment = appointment; + this.selectedAppointment = appointment; }, getIsModalOpen() { return this.isModalOpen; @@ -90,6 +94,21 @@ export default { setIsModalOpen(isOpen) { this.isModalOpen = isOpen; }, + pushEvent() { + let gaAction = this.confirmedAppointment ? this.GaActions.YES : this.GaActions.NO; + if (this.selectedAppointment && this.selectedAppointment.timeSlot) { + this.pushEventToGA( + this.GaCategories.CONFIRMATION_CLICKED, + gaAction, + this.selectedAppointment.timeSlot.startTime + + "-" + + this.selectedAppointment.timeSlot.endTime + + " " + + this.selectedAppointment.date, + true + ); + } + }, }, computed: { modalName() { @@ -112,37 +131,37 @@ export default { if (token.includes(INLINE_SERVICETYPE_TOKEN)) { const serviceType = "" + this.getServiceType + ""; tokens.splice(tokens.indexOf(token), 1, serviceType); - } else if (token.includes(INLINE_DAY_TOKEN) && this.selectedAppontment.date) { + } else if (token.includes(INLINE_DAY_TOKEN) && this.selectedAppointment.date) { const day = "" + - new Date(this.selectedAppontment.date).toLocaleDateString("en-US", { + new Date(this.selectedAppointment.date).toLocaleDateString("en-US", { weekday: "long", timeZone: "UTC", }) + ""; tokens.splice(tokens.indexOf(token), 1, day); - } else if (token.includes(INLINE_DATE_TOKEN) && this.selectedAppontment.date) { - const date = new Date(this.selectedAppontment.date).toLocaleDateString( + } else if (token.includes(INLINE_DATE_TOKEN) && this.selectedAppointment.date) { + const date = new Date(this.selectedAppointment.date).toLocaleDateString( "en-US", { timeZone: "UTC", weekday: "long", month: "long", day: "numeric" } ); tokens.splice(tokens.indexOf(token), 1, date); } else if ( token.includes(INLINE_TIMESLOT_TOKEN) && - this.selectedAppontment.timeSlot + this.selectedAppointment.timeSlot ) { const timeslot = - this.get12HourTimeFormat(this.selectedAppontment.timeSlot.startTime) + + this.get12HourTimeFormat(this.selectedAppointment.timeSlot.startTime) + " - " + - this.get12HourTimeFormat(this.selectedAppontment.timeSlot.endTime); + this.get12HourTimeFormat(this.selectedAppointment.timeSlot.endTime); tokens.splice(tokens.indexOf(token), 1, timeslot); } else if ( token.includes(INLINE_SERVICE_LENGTH_TOKEN) && - this.selectedAppontment.estimatedServiceMinutes + this.selectedAppointment.estimatedServiceMinutes ) { const inshopDurationTime = getDisplayTextForDurationLength( - this.selectedAppontment.estimatedServiceMinutes.minimum, - this.selectedAppontment.estimatedServiceMinutes.maximum + this.selectedAppointment.estimatedServiceMinutes.minimum, + this.selectedAppointment.estimatedServiceMinutes.maximum ); tokens.splice(tokens.indexOf(token), 1, inshopDurationTime); }