jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1430 from Safelite/feature/Digital/CSR-1417

Browse source 
Calendar content
This commit is contained in:
hiteshkumar87 2023-10-19 17:43:14 +05:30 committed by GitHub
commit 37ebeaf5a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 223 additions and 287 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
src/layouts/add-to-calendar/add-to-calendar.spec.js
View file

@ -69,7 +69,23 @@ afterEach(() => {
describe("Add-to-calendar methods...", () => {
test("Add-to-calendar should trigger openModal method", () => {
//Arrange
const { wrapper } = setupMocks({});
const { wrapper } = setupMocks({
customMountOptions: {
propsData: {
appointment: {
RefrrlSeqNum: "123456",
StartDate: new Date(2023, 9, 11, 12, 0, 0),
EndDate: new Date(2023, 9, 11, 13, 0, 0),
Subject: "Meeting with John",
Location: "Conference Room",
Body: "Discuss the project progress",
IsHTML: true,
Duration: "1220",
},
},
},
});
//Act
wrapper.vm.openCalendarModal();
@ -77,45 +93,26 @@ describe("Add-to-calendar methods...", () => {
//Assert
expect(wrapper.vm.$refs.calendarModalQuestion.openModal).toBeCalled();
});
test("serviceType should return 'replacement and recalibration' when isRepair is false and funnelHasRecalibrationPart true.", () => {
//Arrange
store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = true;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.serviceType();
//Assert
expect(testValue).toEqual("replacement and recalibration");
});
test("serviceType should return 'replacement' when isRepair is false and funnelHasRecalibrationPart is false.", () => {
//Arrange
store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = false;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.serviceType();
//Assert
expect(testValue).toEqual("replacement");
});
test("serviceType should return 'repair' when isRepair is true.", () => {
//Arrange
store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.serviceType();
//Assert
expect(testValue).toEqual("repair");
});
test("getCalendarData should return expected model value.", () => {
//Arrange
const type = calendarOptions.OUTLOOKCOM;
const { wrapper } = setupMocks({});
const { wrapper } = setupMocks({
customMountOptions: {
propsData: {
appointment: {
RefrrlSeqNum: "123456",
StartDate: new Date(2023, 9, 11, 12, 0, 0),
EndDate: new Date(2023, 9, 11, 13, 0, 0),
Subject: "Meeting with John",
Location: "Conference Room",
Body: "Discuss the project progress",
IsHTML: true,
Duration: "1220",
},
},
},
});
//Act
const testValue = wrapper.vm.getCalendarData(type);
@ -123,95 +120,26 @@ describe("Add-to-calendar methods...", () => {
//Assert
expect(testValue.name).toEqual(calendarOptions.OUTLOOKCOM);
});
test("getappointmentData should return expected model value for appointmentType mobile.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.order.damage.isRepair = false;
store.getters.funnelHasRecalibrationPart = true;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.getappointmentData();
//Assert
expect(testValue.Subject).toEqual("Safelite replacement and recalibration appointment");
});
test("getappointmentData should return expected model value for appointmentType DROP_OFF and OVERNIGHT_DROP_OFF.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.schedule.routeCode = RouteCodeFlags.OVERNIGHT_DROP_OFF;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.getappointmentData();
//Assert
expect(testValue.Subject).toEqual("Drop off your vehicle by 5:30 PM");
});
test("getappointmentData should return expected model value for appointmentType DROP_OFF and ALL_DAY_DROP_OFF and isSameDayDropOff.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.schedule.routeCode = RouteCodeFlags.ALL_DAY_DROP_OFF;
store.getters.order.schedule.date = new Date().toISOString().split("T")[0];
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.getappointmentData();
//Assert
expect(testValue.Subject).toEqual("Drop off your vehicle in the next 30 - 60 minutes");
});
test("getappointmentData should return expected model value for appointmentType DROP_OFF and ALL_DAY_DROP_OFF.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.schedule.routeCode = RouteCodeFlags.ALL_DAY_DROP_OFF;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.getappointmentData();
//Assert
expect(testValue.Subject).toEqual("Drop off your vehicle between 9:00 AM - 11:00 AM");
});
test("getappointmentData should return expected model value for appointmentType DROP_OFF.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.getappointmentData();
//Assert
expect(testValue.Subject).toEqual("Safelite repair appointment");
});
test("getappointmentData should return expected model value for appointmentType IN_SHOP.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.order.damage.isRepair = true;
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.getappointmentData();
//Assert
expect(testValue.Subject).toEqual("Safelite repair appointment");
});
test("isSameDayDropOff should return true for current schedule date.", () => {
//Arrange
store.getters.order.schedule.date = new Date().toISOString().split("T")[0];
const { wrapper } = setupMocks({});
//Act
const testValue = wrapper.vm.isSameDayDropOff();
//Assert
expect(testValue).toEqual(true);
});
test("setCalendarAppointment should call getAppointment method for iCAL and Outlook.", () => {
//Arrange
const newValue = { name: calendarOptions.OUTLOOK };
const { wrapper } = setupMocks({});
const { wrapper } = setupMocks({
customMountOptions: {
propsData: {
appointment: {
RefrrlSeqNum: "123456",
StartDate: new Date(2023, 9, 11, 12, 0, 0),
EndDate: new Date(2023, 9, 11, 13, 0, 0),
Subject: "Meeting with John",
Location: "Conference Room",
Body: "Discuss the project progress",
IsHTML: true,
Duration: "1220",
},
},
},
});
wrapper.vm.getAppointment = jest.fn();
//Act
wrapper.vm.setCalendarAppointment(newValue);
@ -222,7 +150,22 @@ describe("Add-to-calendar methods...", () => {
test("setCalendarAppointment should call window.open for Google, yahoo and Outlook.com.", () => {
//Arrange
const newValue = { name: calendarOptions.GOOGLE };
const { wrapper } = setupMocks({});
const { wrapper } = setupMocks({
customMountOptions: {
propsData: {
appointment: {
RefrrlSeqNum: "123456",
StartDate: new Date(2023, 9, 11, 12, 0, 0),
EndDate: new Date(2023, 9, 11, 13, 0, 0),
Subject: "Meeting with John",
Location: "Conference Room",
Body: "Discuss the project progress",
IsHTML: true,
Duration: "1220",
},
},
},
});
window.open = jest.fn();
//Act

142
src/layouts/add-to-calendar/add-to-calendar.vue
View file

@ -22,26 +22,19 @@
import { calendarOptions } from "@/constants/calendar-options";
import { calendarStatus } from "@/constants/calendar-status";
import calendarModalQuestion from "@/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question";
import {
getDateFormat,
calculateDuration,
combineDateAndTime,
shortTimeString,
addMinutes,
} from "@/helpers/date-helper";
import { getDateFormat } from "@/helpers/date-helper";
import { getCalendarFile, download } from "@/helpers/add-to-calendar-helper";
import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants";
import store from "@/store";
import { serviceType } from "@/constants/service-type";
export default {
name: "add-to-calendar",
components: {
calendarModalQuestion,
},
props: {
appointment: Object,
},
data() {
return {
appointment: this.getappointmentData(),
selectedCalendarOption: null,
};
},
@ -83,67 +76,6 @@ export default {
openCalendarModal() {
this.$refs["calendarModalQuestion"].openModal();
},
scheduleDate() {
return store.getters.order.schedule.date;
},
scheduleStartTime() {
return store.getters.order.schedule.startTime;
},
scheduleEndTime() {
return store.getters.order.schedule.endTime;
},
serviceLocationAddress() {
return store.getters.order.serviceLocation.address;
},
ServiceLocationAddress2() {
return store.getters.order.serviceLocation.address2;
},
serviceLocationCity() {
return store.getters.order.serviceLocation.city;
},
serviceLocationState() {
return store.getters.order.serviceLocation.state;
},
serviceLocationZipCode() {
return store.getters.order.serviceLocation.zipCode;
},
providerAddress() {
return store.getters.order.serviceLocation.provider.address.streetAddress;
},
providerCity() {
return store.getters.order.serviceLocation.provider.address.city;
},
providerState() {
return store.getters.order.serviceLocation.provider.address.state;
},
providerZipCode() {
return store.getters.order.serviceLocation.provider.address.zipCode;
},
appointmentType() {
return store.getters.order.serviceLocation.appointmentType;
},
uniqueId() {
return store.getters.order.referralNumber?.toString();
},
serviceType() {
const isRepair = store.getters.order.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.funnelHasRecalibrationPart;
if (!isRepair) {
if (funnelHasRecalibrationPart) {
return serviceType.REPLACEMENT_AND_RECALIBRATION;
} else {
return serviceType.REPLACEMENT;
}
}
return serviceType.REPAIR;
},
routeCode() {
return store.getters.order.schedule.routeCode;
},
isSameDayDropOff() {
const todaysDate = new Date().toISOString().split("T")[0];
return this.scheduleDate() === todaysDate;
},
getCalendarData(type) {
var URL = "";
const dateFormat = "yyyyMMddTHHmmss";
@ -185,72 +117,6 @@ export default {
icon: require(`@/assets/img/icons/${type}.svg`),
};
},
getappointmentData() {
var subject = "";
var location = "";
var startDateTime = combineDateAndTime(this.scheduleDate(), this.scheduleStartTime());
var endDateTime = combineDateAndTime(this.scheduleDate(), this.scheduleEndTime());
var body = "";
var isHTML = false;
var duration = "";
if (this.appointmentType() === AppointmentTypeStrings.MOBILE) {
location = `${
this.ServiceLocationAddress2() ? this.ServiceLocationAddress2() + ", " : ""
}${this.serviceLocationAddress()}, ${this.serviceLocationCity()}, ${this.serviceLocationState()} ${this.serviceLocationZipCode()}`;
subject = `Safelite ${this.serviceType()} appointment`;
body =
"Your safety is our top priority, so we'll let you know who's coming to you and your tech will reach out to let you know when they're on the way.";
} else {
location = `${this.providerAddress()}, ${this.providerCity()}, ${this.providerState()} ${this.providerZipCode()}`;
if (this.appointmentType() === AppointmentTypeStrings.DROP_OFF) {
if (this.routeCode().includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
subject = "Drop off your vehicle by 5:30 PM";
body =
"Drop off your vehicle by 5:30 PM the night of your scheduled appointment. The shop will work with you on a convenient pick-up time.";
} else if (this.routeCode().includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
if (this.isSameDayDropOff()) {
subject = "Drop off your vehicle in the next 30 - 60 minutes";
endDateTime = addMinutes(startDateTime, 120);
body =
"Drop your vehicle off in the next 30 - 60 minutes. We'll work your vehicle into our day's schedule. The shop will work with you on a convenient pick-up time.";
} else {
endDateTime = addMinutes(startDateTime, 120);
subject =
"Drop off your vehicle between " +
shortTimeString(startDateTime) +
" - " +
shortTimeString(endDateTime);
body = `Drop off your vehicle by ${shortTimeString(
endDateTime
)} and pick it up later in the day. When you arrive, park in an open space and follow the key drop instructions. We'll text you when your vehicle is ready.`;
}
} //normal time slot
else {
subject = `Safelite ${this.serviceType()} appointment`;
body = "Just a reminder that you're coming to us at " + location + ".";
}
} else {
subject = `Safelite ${this.serviceType()} appointment`;
body = "Just a reminder that you're coming to us at " + location + ".";
}
duration = calculateDuration(startDateTime, endDateTime);
}
return {
Subject: subject,
Location: location,
StartDate: startDateTime,
EndDate: endDateTime,
RefrrlSeqNum: this.uniqueId(),
Body: body,
IsHTML: isHTML,
Duration: duration,
};
},
getAppointment() {
let body = this.appointment.Body;
body = body.replace("|", "<").replace("~", ">");

16
src/layouts/confirmation/confirmation.spec.js
View file

@ -115,16 +115,16 @@ describe("confirmation.vue", () => {
});
});
describe("computed properties...", () => {
// test("ScheduleDateFormatted should return date in expected format.", () => {
// //Arrange
// const { wrapper } = setupMocks({});
test("ScheduleDateFormatted should return date in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// // Act
// const testValue = wrapper.vm.ScheduleDateFormatted;
// Act
const testValue = wrapper.vm.ScheduleDateFormatted;
// // Assert
// expect(testValue).toEqual("Sunday, January 1");
// });
// Assert
expect(testValue).toEqual("Sunday, January 1");
});
test("ScheduleTimeFormatted should return mobile time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;

165
src/layouts/confirmation/confirmation.vue
View file

@ -10,10 +10,6 @@
<img :src="ScheduleConfirmationImage" />
<span v-html="ScheduleConfirmationText"></span>
</div>
<div
class="appoinmenttext"
v-html="this.getAppointmentWordingText"></div>
<div class="main">
<div>
<vehicleBanner
@ -21,16 +17,14 @@
:displayGenericVehicleImage="false" />
</div>
<div class="scheduleText">
<p>{{ this.ScheduleDateFormatted }}</p>
<p>{{ this.ScheduleTimeFormatted }}</p>
<p>{{ ScheduleDateFormatted }}</p>
<p>{{ ScheduleTimeFormatted }}</p>
</div>
<addToCalendar></addToCalendar>
<addToCalendar :appointment="this.AppointmentData" />
<div
class="appoinmenttext"
v-html="this.AppointmentWordingText"></div>
<div class="appoinmenttext" v-html="AppointmentWordingText"></div>
</div>
<div class="emailtext" v-html="this.ConfirmationEmailText"></div>
<div class="emailtext" v-html="ConfirmationEmailText"></div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
@ -52,13 +46,19 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
import addToCalendar from "@/layouts/add-to-calendar/add-to-calendar";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
import { applicationConfig } from "@/constants/application-config.js";
import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
import {
calculateDuration,
combineDateAndTime,
shortTimeString,
addMinutes,
} from "@/helpers/date-helper";
import { Form } from "vee-validate";
import store from "@/store";
import { serviceType } from "@/constants/service-type";
import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper";
export default {
name: "confirmation",
@ -89,9 +89,9 @@ export default {
},
ConfirmationEmailText() {
return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
.replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
.replaceAll("&lt;", "<")
.replaceAll("&gt;", ">");
?.replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
?.replaceAll("&lt;", "<")
?.replaceAll("&gt;", ">");
},
ScheduleDate() {
return store.getters.order.schedule.date;
@ -143,17 +143,17 @@ export default {
},
AppointmentWordingText() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return this.MobileWordingText.replaceAll(
return this.MobileWordingText?.replaceAll(
"{custom:ADDRESS}",
this.ServiceLocationFullAddress
);
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return this.DropOffWordingText.replaceAll(
return this.DropOffWordingText?.replaceAll(
"{custom:ADDRESS}",
this.ProviderFullAddress
);
} else {
return this.InShopWordingText.replaceAll(
return this.InShopWordingText?.replaceAll(
"{custom:ADDRESS}",
this.ProviderFullAddress
);
@ -190,6 +190,133 @@ export default {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
},
IsSameDayDropOff() {
const todaysDate = new Date().toISOString().split("T")[0];
return this.ScheduleDate === todaysDate;
},
Mobile_Appointment_Subject() {
return this.getCmsContent("Mobile_Appointment_Widget", "HeaderText");
},
Mobile_Appointment_Body() {
return this.getCmsContent("Mobile_Appointment_Widget", "BodyText");
},
InShop_Appointment_Subject() {
return this.getCmsContent("InShop_Appointment_Widget", "HeaderText");
},
InShop_Appointment_Body() {
return this.getCmsContent("InShop_Appointment_Widget", "BodyText");
},
Drop_Off_Appointment_Subject() {
return this.getCmsContent("Drop_Off_Appointment_Widget", "HeaderText");
},
Drop_Off_Appointment_Body() {
return this.getCmsContent("Drop_Off_Appointment_Widget", "BodyText");
},
Overnight_Drop_Off_Appointment_Subject() {
return this.getCmsContent("Drop_Off_Appointment_Widget", "HeaderText");
},
Overnight_Drop_Off_Appointment_Body() {
return this.getCmsContent("Drop_Off_Appointment_Widget", "BodyText");
},
All_Day_Drop_Off_Appointment_Subject() {
return this.getCmsContent("All_Day_Drop_Off_Appointment_Widget", "HeaderText");
},
All_Day_Drop_Off_Appointment_Body() {
return this.getCmsContent("All_Day_Drop_Off_Appointment_Widget", "BodyText");
},
Same_Day_Drop_Off_Appointment_Subject() {
return this.getCmsContent("Same_Day_Drop_Off_Appointment_Widget", "HeaderText");
},
Same_Day_Drop_Off_Appointment_Body() {
return this.getCmsContent("Same_Day_Drop_Off_Appointment_Widget", "BodyText");
},
UniqueId() {
return store.getters.order.referralNumber?.toString();
},
ServiceType() {
const isRepair = store.getters.order.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.funnelHasRecalibrationPart;
if (!isRepair) {
if (funnelHasRecalibrationPart) {
return serviceType.REPLACEMENT_AND_RECALIBRATION;
} else {
return serviceType.REPLACEMENT;
}
}
return serviceType.REPAIR;
},
RouteCode() {
return store.getters.order.schedule.routeCode;
},
AppointmentData() {
var subject = "";
var location = "";
var startDateTime = combineDateAndTime(this.ScheduleDate, this.ScheduleStartTime);
var endDateTime = combineDateAndTime(this.ScheduleDate, this.ScheduleEndTime);
var body = "";
var isHTML = false;
var duration = "";
if (this.AppointmentType === AppointmentTypeStrings.MOBILE) {
location = this.ServiceLocationFullAddress?.replace("<br/>", "");
subject = this.Mobile_Appointment_Subject?.replace(
"{custom:SERVICETYPE}",
this.ServiceType
);
body = this.Mobile_Appointment_Body;
} else {
location = this.ProviderFullAddress?.replace("<br/>", "");
if (this.AppointmentType === AppointmentTypeStrings.DROP_OFF) {
if (this.RouteCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
subject = this.Overnight_Drop_Off_Appointment_Subject;
body = this.Overnight_Drop_Off_Appointment_Body;
} else if (this.RouteCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
if (this.IsSameDayDropOff) {
subject = this.Same_Day_Drop_Off_Appointment_Subject;
endDateTime = addMinutes(startDateTime, 120);
body = this.Same_Day_Drop_Off_Appointment_Body;
} else {
endDateTime = addMinutes(startDateTime, 120);
subject = this.All_Day_Drop_Off_Appointment_Subject?.replace(
"{custom:STARTDATETIME}",
shortTimeString(startDateTime)
).replace("{custom:ENDDATETIME}", shortTimeString(endDateTime));
body = this.All_Day_Drop_Off_Appointment_Body?.replace(
"{custom:ENDDATETIME}",
shortTimeString(endDateTime)
);
}
} //normal time slot
else {
subject = this.Drop_Off_Appointment_Subject?.replace(
"{custom:SERVICETYPE}",
this.ServiceType
);
body = this.Drop_Off_Appointment_Body?.replace(
"{custom:ADDRESS}",
location
);
}
} else {
subject = this.InShop_Appointment_Subject?.replace(
"{custom:SERVICETYPE}",
this.ServiceType
);
body = this.InShop_Appointment_Body?.replace("{custom:ADDRESS}", location);
}
duration = calculateDuration(startDateTime, endDateTime);
}
return {
Subject: subject,
Location: location,
StartDate: startDateTime,
EndDate: endDateTime,
RefrrlSeqNum: this.UniqueId,
Body: body,
IsHTML: isHTML,
Duration: duration,
};
},
},
data() {
return {