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);
}