Merge branch 'develop' into feature/CSR-1392

This commit is contained in:
CarlNation 2023-10-12 08:41:05 -04:00
commit b205996768
23 changed files with 1662 additions and 111 deletions

View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd">
<g fill-rule="nonzero">
<g>
<g>
<path fill="#FBBB00" d="M4.432 12.086l-.696 2.6-2.544.053C.432 13.329 0 11.715 0 10c0-1.658.403-3.222 1.118-4.599l2.266.415.992 2.252c-.207.606-.32 1.256-.32 1.932 0 .734.132 1.437.376 2.086z" transform="translate(-119 -800) translate(104 753) translate(15 47)"/>
<path fill="#518EF8" d="M19.825 8.132C19.94 8.737 20 9.362 20 10c0 .716-.075 1.414-.219 2.088-.486 2.292-1.758 4.294-3.52 5.71h-.001l-2.853-.146-.404-2.52c1.169-.686 2.083-1.76 2.564-3.044H10.22V8.132h9.605z" transform="translate(-119 -800) translate(104 753) translate(15 47)"/>
<path fill="#28B446" d="M16.26 17.798C14.547 19.176 12.37 20 10 20c-3.808 0-7.12-2.129-8.808-5.261l3.24-2.653c.845 2.254 3.02 3.859 5.568 3.859 1.096 0 2.122-.297 3.003-.814l3.257 2.667z" transform="translate(-119 -800) translate(104 753) translate(15 47)"/>
<path fill="#F14336" d="M16.383 2.302l-3.24 2.652c-.911-.57-1.989-.899-3.143-.899-2.607 0-4.821 1.678-5.624 4.013L1.12 5.401C2.781 2.192 6.134 0 10 0c2.426 0 4.651.864 6.383 2.302z" transform="translate(-119 -800) translate(104 753) translate(15 47)"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
<g fill="none" fill-rule="evenodd">
<g fill="#0072C6" fill-rule="nonzero">
<g>
<g>
<path d="M12.794 4.525v3.677l1.37.809c.036.01.114.01.15 0l5.899-3.728c0-.441-.44-.758-.687-.758h-6.732z" transform="translate(-119 -870) translate(104 753) translate(15 117)"/>
<path d="M12.794 9.574l1.25.805c.176.121.389 0 .389 0-.212.121 5.78-3.61 5.78-3.61v6.757c0 .736-.502 1.044-1.067 1.044h-6.353V9.574z" transform="translate(-119 -870) translate(104 753) translate(15 117)"/>
<g>
<path d="M6.266 7.736c-.427 0-.766.187-1.017.562-.25.375-.376.871-.376 1.489 0 .627.125 1.122.376 1.487.25.365.58.546.986.546.42 0 .753-.177.998-.532.246-.354.37-.846.37-1.475 0-.656-.12-1.166-.359-1.531-.238-.364-.564-.546-.978-.546z" transform="translate(-119 -870) translate(104 753) translate(15 117) translate(.052 .143)"/>
<path d="M.332 2.515v14.383l11.671 2.295V.397L.333 2.515zm7.81 9.623c-.493.609-1.136.914-1.93.914-.773 0-1.403-.295-1.89-.885-.486-.59-.73-1.358-.73-2.305 0-1 .247-1.81.741-2.427.495-.618 1.15-.927 1.966-.927.77 0 1.393.295 1.869.887.476.591.713 1.37.713 2.338.001.995-.246 1.797-.739 2.405z" transform="translate(-119 -870) translate(104 753) translate(15 117) translate(.052 .143)"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
<g fill="none" fill-rule="evenodd">
<g fill="#DBA702" fill-rule="nonzero">
<g>
<g>
<path d="M12.394 4.525v3.677l1.327.809c.035.01.111.01.146 0l5.714-3.728c0-.441-.425-.758-.665-.758h-6.522z" transform="translate(-119 -835) translate(104 753) translate(15 82)"/>
<path d="M12.394 9.574l1.211.805c.171.121.377 0 .377 0-.205.121 5.6-3.61 5.6-3.61v6.757c0 .736-.487 1.044-1.034 1.044h-6.155V9.574z" transform="translate(-119 -835) translate(104 753) translate(15 82)"/>
<g>
<path d="M6.07 7.736c-.413 0-.742.187-.985.562-.243.375-.365.871-.365 1.489 0 .627.122 1.122.365 1.487s.562.546.956.546c.406 0 .728-.177.966-.532.238-.354.358-.846.358-1.475 0-.656-.116-1.166-.347-1.531-.231-.364-.547-.546-.948-.546z" transform="translate(-119 -835) translate(104 753) translate(15 82) translate(.05 .143)"/>
<path d="M.322 2.515v14.383l11.306 2.295V.397L.322 2.515zm7.566 9.623c-.478.609-1.101.914-1.87.914-.75 0-1.359-.295-1.83-.885-.472-.59-.709-1.358-.709-2.305 0-1 .24-1.81.719-2.427.48-.618 1.114-.927 1.904-.927.746 0 1.35.295 1.81.887.461.591.692 1.37.692 2.338 0 .995-.239 1.797-.716 2.405z" transform="translate(-119 -835) translate(104 753) translate(15 82) translate(.05 .143)"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
<g fill="none" fill-rule="evenodd">
<g fill="#5F01D1" fill-rule="nonzero">
<g>
<g>
<g>
<path d="M0 4.868h4.29l2.498 6.39 2.53-6.39h4.177l-6.29 15.129H3.003l1.722-4.01L0 4.869zm18.358 5.106H13.68L17.832 0h4.661l-4.135 9.974zm-3.452.955c1.435 0 2.599 1.163 2.599 2.599 0 1.435-1.164 2.598-2.6 2.598-1.434 0-2.598-1.163-2.598-2.598 0-1.436 1.164-2.6 2.599-2.6z" transform="translate(-119 -905) translate(104 753) translate(15 152) translate(0 .11)"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 708 B

View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="20" viewBox="0 0 17 20">
<g fill="none" fill-rule="evenodd">
<g fill="#606060" fill-rule="nonzero">
<g>
<g>
<path d="M5.44 20C2.463 19.983 0 13.907 0 10.812c0-5.055 3.793-6.161 5.254-6.161.659 0 1.362.258 1.982.487.434.16.883.325 1.132.325.15 0 .501-.14.812-.264.663-.263 1.487-.591 2.447-.591h.006c.717 0 2.89.157 4.198 2.12l.306.46-.44.332c-.63.475-1.778 1.341-1.778 3.058 0 2.032 1.3 2.814 1.925 3.19.276.166.561.337.561.71 0 .245-1.95 5.492-4.782 5.492-.692 0-1.182-.209-1.614-.392-.437-.186-.815-.346-1.438-.346-.316 0-.715.149-1.138.307-.578.216-1.232.461-1.974.461h-.02zM11.927 0C12.001 2.66 10.1 4.504 8.2 4.388 7.887 2.266 10.1 0 11.927 0z" transform="translate(-119 -763) translate(104 753) translate(15 10)"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 907 B

View file

@ -0,0 +1,8 @@
const calendarOptions = {
ICAL: "iCal",
GOOGLE: "Google",
OUTLOOK: "Outlook",
OUTLOOKCOM: "Outlook.com",
YAHOO: "Yahoo",
};
export { calendarOptions };

View file

@ -0,0 +1,7 @@
const calendarStatus = {
FREE: "Free",
BUSY: "Busy",
TENTATIVE: "Tentative",
OUT_OF_THE_OFFICE: "OutOfTheOffice",
};
export { calendarStatus };

View file

@ -21,9 +21,8 @@ export default {
name: "add-vaps-modal-buttons",
props: {
cartItems: Object,
rainDefenseItem: Object,
wiperItems: Object,
vapsTilesCmsName: String,
availableLineItems: Object,
},
data() {
return {
@ -55,13 +54,19 @@ export default {
});
},
rainDefensePrice() {
const lineItem = this.rainDefenseItem;
// const lineItem = this.rainDefenseItem;
const lineItem = this.availableLineItems.find((item) => {
return item.partType === "RAIN DEFENSE";
});
const price = lineItem.laborAmount + lineItem.sellingPrice + lineItem.kitPrice;
return parseFloat(price).toFixed(2);
},
wipersPrice() {
let price = 0;
const lineItems = this.wiperItems;
const lineItems = this.availableLineItems.filter((item) => {
return item.partType.includes(" WIPER");
});
lineItems?.forEach((item) => {
price += item.laborAmount + item.sellingPrice + item.kitPrice;
});

View file

@ -54,36 +54,28 @@
</template>
<script>
import cart from "@/fmg-components/cart/cart";
import baseMixin from "@/mixins/base-mixin.js";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { packageNames } from "@/constants/package-names";
import {
getHighestFullySatisfiedTier,
containsLineItemWithPartType,
getPackageContents,
findLineItemsWithPartType,
} from "@/helpers/service-package-helper";
import reviewBlock from "@/layouts/review/review-block/review-block";
import textLink from "@/ux-components/text-link/text-link";
import textBlock from "@/digital-components/text-block/text-block";
export default {
name: "modal",
props: {
headerCmsWidgetName: String,
servicePackageOptionsCmsName: String,
damage: Object,
storeLineItems: Object,
servicePackageOptionsCmsName: String,
availableLineItems: Object,
allowableCartItems: Object,
lineItems: Object,
},
data() {
return {
isActive: false,
//availableVaps: [], TO DO Do we need this?
packageWithVAPS: false,
// packageLevel: "",
amountDue: this.getAmountDue(),
};
},
@ -91,11 +83,6 @@ export default {
toggleClass: function (event) {
this.isActive = !this.isActive;
},
initializeComponent(apiResponses) {
//TO DO Do we need this?
// const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
// this.availableVaps = vapsFromApi;
},
getPackagePriceString(packageName) {
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
@ -104,7 +91,7 @@ export default {
let priceFloat = this.isInsuranceSelected
? 0
: baseMixin.methods.getTierOnePackagePrice(
baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
baseMixin.methods.filterOutFees(this.availableLineItems)
);
priceFloat += this.getVapsPrice(packageName);
@ -131,7 +118,7 @@ export default {
getVapsLineItemsForSelectedPackage(packageName) {
const packageContentTypes = getPackageContents(
this.glassToReplace,
this.nullSafeAvailableLineItems,
this.availableLineItems,
this.isRepair,
packageName
);
@ -140,10 +127,9 @@ export default {
packageContentTypes.forEach((vapType) => {
vapsLineItemsForSelectedPackage.push(
...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
...findLineItemsWithPartType(vapType, this.availableLineItems)
);
});
// console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
return vapsLineItemsForSelectedPackage;
},
},
@ -184,7 +170,7 @@ export default {
displayedPackageLineItems() {
const displayedPackageLineItems = [];
const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
//TO DO Could we get the same list from this.storeLineItems?
// TODO Determine if we could get the same list from this.lineItems?
packageLineItems?.forEach((item) => {
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
const packageLineItem = {
@ -195,7 +181,6 @@ export default {
};
displayedPackageLineItems.push(packageLineItem);
});
// console.log("What displayedPackageLineItems is", packageLineItems);
return displayedPackageLineItems;
},
displayedNonPackageLineItems() {
@ -237,11 +222,11 @@ export default {
return this.damage.isRepair;
},
vaps() {
const vaps = this.storeLineItems?.vaps;
const vaps = this.lineItems?.vaps;
return vaps?.length > 0 ? vaps : [];
},
supportingItems() {
const supportingItems = this.storeLineItems?.supportingItems;
const supportingItems = this.lineItems?.supportingItems;
return supportingItems?.length > 0 ? supportingItems : [];
},
recycleLabel() {
@ -259,9 +244,6 @@ export default {
// }
return true;
},
nullSafeAvailableLineItems() {
return this.availableLineItems ?? [];
},
},
components: {
textBlock,

View file

@ -0,0 +1,76 @@
import { calendarStatus } from "@/constants/calendar-status";
import { getDateFormat } from "@/helpers/date-helper";
export function getCalendarFile(calFile) {
const dateFormat = "yyyyMMddTHHmmss";
var calEvent = [];
calEvent.push("BEGIN:VCALENDAR");
calEvent.push("VERSION:2.0");
calEvent.push("BEGIN:VEVENT");
calEvent.push("DTSTAMP:" + calFile.TimeStamp);
calEvent.push("UID:" + calFile.UniqueId + "@safelite.com");
calEvent.push("PRODID:noreply@safelite.com");
switch (calFile.Status) {
case calendarStatus.BUSY:
calEvent.push("X-MICROSOFT-CDO-BUSYSTATUS:BUSY");
break;
case calendarStatus.FREE:
calEvent.push("TRANSP:TRANSPARENT");
break;
case calendarStatus.TENTATIVE:
calEvent.push("STATUS:TENTATIVE");
break;
case calendarStatus.OUT_OF_THE_OFFICE:
calEvent.push("X-MICROSOFT-CDO-BUSYSTATUS:OOF");
break;
default:
//throw new Exception("Invalid CalendarStatus");
}
if (calFile.AllDayEvent) {
calEvent.push("DTSTART;VALUE=DATE:" + getDateFormat(calFile.StartDate, dateFormat));
calEvent.push("DTEND;;VALUE=DATE:" + getDateFormat(calFile.EndDate, dateFormat));
} else {
calEvent.push("DTSTART:" + getDateFormat(calFile.StartDate, dateFormat));
calEvent.push("DTEND:" + getDateFormat(calFile.EndDate, dateFormat));
}
calEvent.push("SUMMARY:" + ToCalendarFileString(calFile.Subject, " "));
if (calFile.Location != null && calFile.Location != "") {
calEvent.push("LOCATION:" + ToCalendarFileString(calFile.Location, " "));
}
if (calFile.Body != null && calFile.Body != "") {
if (calFile.IsHTML) {
calEvent.push("DESCRIPTION:" + ToCalendarFileString(calFile.Body));
calEvent.push(
"X-ALT-DESC;FMTTYPE=text/html:" +
'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">' +
"<HTML><HEAD><TITLE></TITLE></HEAD><BODY>" +
'<P DIR=LTR><SPAN LANG="en-us">' +
"</SPAN>" +
ToCalendarFileString(calFile.Body) +
"</BODY></HTML>"
);
} else {
calEvent.push("DESCRIPTION:" + ToCalendarFileString(calFile.Body));
}
}
calEvent.push("END:VEVENT");
calEvent.push("END:VCALENDAR");
return calEvent.join("\r\n");
}
function ToCalendarFileString(str, replacementArg = "<p>") {
return str.replace("\r\n", replacementArg);
}
export function download(filename, fileBody) {
var element = document.createElement("a");
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(fileBody));
element.setAttribute("download", filename);
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}

View file

@ -0,0 +1,79 @@
import { download, getCalendarFile } from "./add-to-calendar-helper";
// Create a mock function
const mockDownload = jest.fn((filename, fileBody) => {
// Simulate creating an anchor element
const mockElement = {
setAttribute: jest.fn(),
style: { display: "none" },
click: jest.fn(),
};
// Mock the document.createElement method
document.createElement = jest.fn(() => mockElement);
// Mock the document.body.appendChild method
document.body.appendChild = jest.fn();
// Mock the document.body.removeChild method
document.body.removeChild = jest.fn();
// Call the original function with the mock element
download(filename, fileBody);
// Return the mock element for further assertions
return mockElement;
});
// Use the mock function in a test
test("download function", () => {
// Call the mock function with some arguments
const mockElement = mockDownload("test.txt", "Hello world");
// Make assertions about the mock function and the mock element
expect(mockDownload).toHaveBeenCalledTimes(1);
expect(mockDownload).toHaveBeenCalledWith("test.txt", "Hello world");
expect(mockElement.setAttribute).toHaveBeenCalledTimes(2);
expect(mockElement.setAttribute).toHaveBeenCalledWith(
"href",
"data:text/plain;charset=utf-8," + encodeURIComponent("Hello world")
);
expect(mockElement.setAttribute).toHaveBeenCalledWith("download", "test.txt");
expect(mockElement.style.display).toBe("none");
expect(mockElement.click).toHaveBeenCalledTimes(1);
expect(document.body.appendChild).toHaveBeenCalledTimes(1);
expect(document.body.appendChild).toHaveBeenCalledWith(mockElement);
expect(document.body.removeChild).toHaveBeenCalledTimes(1);
expect(document.body.removeChild).toHaveBeenCalledWith(mockElement);
});
// Use the mock function in a test
test("getCalendarFile function", () => {
// Create a mock calFile object
const mockCalFile = {
UniqueId: "123456",
Status: "Busy",
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",
TimeStamp: "20231011T113118",
};
// Call the mock function with the mock calFile object
const mockCalendarFile = getCalendarFile(mockCalFile);
// Make assertions about the mock function and the mock calendar file
expect(mockCalendarFile).toContain("BEGIN:VCALENDAR");
expect(mockCalendarFile).toContain("VERSION:2.0");
expect(mockCalendarFile).toContain("BEGIN:VEVENT");
expect(mockCalendarFile).toContain("DTSTAMP:20231011T113118");
expect(mockCalendarFile).toContain("UID:123456@safelite.com");
expect(mockCalendarFile).toContain("PRODID:noreply@safelite.com");
expect(mockCalendarFile).toContain("DTSTART:20231011T120000");
expect(mockCalendarFile).toContain("DTEND:20231011T130000");
expect(mockCalendarFile).toContain("X-MICROSOFT-CDO-BUSYSTATUS:BUSY");
expect(mockCalendarFile).toContain("SUMMARY:Meeting with John");
expect(mockCalendarFile).toContain("LOCATION:Conference Room");
expect(mockCalendarFile).toContain("DESCRIPTION:Discuss the project progress");
expect(mockCalendarFile).toContain("END:VEVENT");
expect(mockCalendarFile).toContain("END:VCALENDAR");
});

View file

@ -1,36 +1,27 @@
export function getDateDifferenceInDays(startDate, endDate) {
// Create date objects from the input strings
var date1 = new Date(endDate);
date1.setHours(0, 0, 0, 0);
var date2 = new Date(startDate);
date2.setHours(0, 0, 0, 0);
// To calculate the time difference of two dates
var Difference_In_Time = date1.getTime() - date2.getTime();
// To calculate the no. of days between two dates
return Difference_In_Time / (1000 * 3600 * 24);
// Use the built-in method to get the difference in milliseconds
var difference = date1 - date2;
// Convert milliseconds to days and return the result
return difference / (1000 * 3600 * 24);
}
export function getFullDayName(date) {
if (date instanceof Date !== true) return;
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
return days[date.getDay()];
// Use a ternary operator to check if the input is a valid date object
return date instanceof Date
? // Use the built-in method toLocaleDateString() to get the full day name in the current locale
date.toLocaleDateString(undefined, { weekday: "long" })
: // Return undefined if the input is not a valid date object
undefined;
}
export function getFullMonthName(date) {
if (date instanceof Date !== true) return;
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return monthNames[date.getMonth()];
// Use a ternary operator to check if the input is a valid date object
return date instanceof Date
? // Use the built-in method toLocaleDateString() to get the full month name in the current locale
date.toLocaleDateString(undefined, { month: "long" })
: // Return undefined if the input is not a valid date object
undefined;
}
export function get12HourTimeFormat(time) {
// Check correct time format and split into components
@ -62,3 +53,66 @@ export function get12HourTimeMobileFormat(time) {
}
return time.join(""); // return adjusted time or original string
}
export function getDateFormat(date, format) {
if (date instanceof Date !== true) return;
const year = date.getFullYear();
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + date.getDate()).slice(-2);
const hour = ("0" + date.getHours()).slice(-2);
const minute = ("0" + date.getMinutes()).slice(-2);
const second = ("0" + date.getSeconds()).slice(-2);
return format
.replace("yyyy", year)
.replace("MM", month)
.replace("dd", day)
.replace("hh", hour)
.replace("HH", hour)
.replace("mm", minute)
.replace("ss", second);
}
export function calculateDuration(startDate, endDate) {
if (startDate instanceof Date !== true) return;
if (endDate instanceof Date !== true) return;
return convertMsToTime(endDate - startDate);
}
export function convertMsToTime(milliseconds) {
let seconds = Math.floor(milliseconds / 1000);
let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60);
seconds = seconds % 60;
minutes = minutes % 60;
//commenting to get 24 time format
//hours = hours % 24;
return `${padTo2Digits(hours)}${padTo2Digits(minutes)}`;
}
export function padTo2Digits(time) {
// Use the built-in method toString() with a radix of 10 to convert the time value to a decimal string
time = time.toString(10);
// Use the conditional operator to check if the length of the string is less than 2
return time.length < 2
? // If yes, prepend a '0' to the string and return it
"0" + time
: // If no, return the original string
time;
}
export function combineDateAndTime(date, time) {
// Use the Date.parse() method to convert the date and time strings to a numeric value
var timestamp = Date.parse(date + "T" + time);
// Use the new Date() constructor to create a new date object from the numeric value
var newDate = new Date(timestamp);
// Return the new date object
return newDate;
}
export function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes * 60000);
}
export function shortTimeString(date) {
// Use a ternary operator to check if the input is a valid date object
return date instanceof Date
? // Use the built-in method toLocaleTimeString() to get the short time string in the current locale
date.toLocaleTimeString(undefined, { hour: "numeric", minute: "numeric", hour12: true })
: // Return undefined if the input is not a valid date object
undefined;
}

View file

@ -0,0 +1,191 @@
import {
getFullDayName,
getFullMonthName,
get12HourTimeFormat,
get12HourTimeMobileFormat,
getDateFormat,
getDateDifferenceInDays,
calculateDuration,
padTo2Digits,
combineDateAndTime,
addMinutes,
shortTimeString,
} from "./date-helper";
describe("date-helper.js", () => {
it("get12HourTimeMobileFormat should return time in expected 12 hour mobile format.", () => {
// Define some sample times and their expected 12-hour formats
const testCases = [
{ time: "00:00", expected: "12 AM" },
{ time: "01:23", expected: "1:23 AM" },
{ time: "11:59", expected: "11:59 AM" },
{ time: "12:00", expected: "12 PM" },
{ time: "13:45", expected: "1:45 PM" },
{ time: "23:59", expected: "11:59 PM" },
];
// Loop through the test cases and call the function with each time
for (let testCase of testCases) {
// Call the function and store the result
const result = get12HourTimeMobileFormat(testCase.time);
// Assert that the result is equal to the expected 12-hour format
expect(result).toEqual(testCase.expected);
}
});
// Test if the function returns the correct 12-hour format for some sample times
it("should return the correct 12-hour format", function () {
// Define some sample times and their expected 12-hour formats
const testCases = [
{ time: "00:00", expected: "12:00 AM" },
{ time: "01:23", expected: "1:23 AM" },
{ time: "11:59", expected: "11:59 AM" },
{ time: "12:00", expected: "12:00 PM" },
{ time: "13:45", expected: "1:45 PM" },
{ time: "23:59", expected: "11:59 PM" },
];
// Loop through the test cases and call the function with each time
for (let testCase of testCases) {
// Call the function and store the result
const result = get12HourTimeFormat(testCase.time);
// Assert that the result is equal to the expected 12-hour format
expect(result).toEqual(testCase.expected);
}
});
it("getFullMonthName should return full month format.", () => {
// Arrange / Act
const date = new Date("2023-10-01");
const monthName = getFullMonthName(date);
// Assert
expect(monthName).toEqual("October");
});
it("getFullDayName should return full Day Name format.", () => {
// Arrange / Act
const date = new Date("2023-10-01");
const dayName = getFullDayName(date);
// Assert
expect(dayName).toEqual("Sunday");
});
it("getDateFormat should return date in the given format.", () => {
// Arrange / Act
const date = new Date("2023-10-01");
const format = "yyyy-MM-dd";
const formattedDate = getDateFormat(date, format);
// Assert
expect(formattedDate).toEqual("2023-10-01");
});
it("should return the correct difference in days", function () {
// Define some sample dates and their expected differences
const testCases = [
{ startDate: "2023-10-12", endDate: "2023-10-15", expected: 3 },
{ startDate: "2023-01-01", endDate: "2023-01-31", expected: 30 },
{ startDate: "2022-12-31", endDate: "2023-01-01", expected: 1 },
{ startDate: "2023-02-28", endDate: "2023-03-01", expected: 1 },
{ startDate: "2023-03-01", endDate: "2023-02-28", expected: -1 },
];
// Loop through the test cases and call the function with each pair of dates
for (let testCase of testCases) {
// Call the function and store the result
const result = getDateDifferenceInDays(testCase.startDate, testCase.endDate);
// Assert that the result is equal to the expected difference
expect(result).toEqual(testCase.expected);
}
});
it("calculateDuration should return duration in hhmm format.", () => {
// Arrange / Act
const startDate = new Date("2023-10-01 10:00:00");
const endDate = new Date("2023-10-01 23:00:00");
const duration = calculateDuration(startDate, endDate);
// Assert
expect(duration).toEqual("1300");
});
it("padTo2Digits should return time in 2 digit format.", () => {
// Define some sample time values and their expected strings
const testCases = [
{ time: 0, expected: "00" },
{ time: 1, expected: "01" },
{ time: 9, expected: "09" },
{ time: 10, expected: "10" },
{ time: 59, expected: "59" },
];
// Loop through the test cases and call the function with each time value
for (let testCase of testCases) {
// Call the function and store the result
const result = padTo2Digits(testCase.time);
// Assert that the result is equal to the expected string
expect(result).toEqual(testCase.expected);
}
});
it("combineDateAndTime should return combined dateTime format.", () => {
// Define some sample inputs and their expected outputs
const testCases = [
{ date: "2023-10-12", time: "12:00", expected: new Date(2023, 9, 12, 12, 0) },
{ date: "2023-01-01", time: "00:00", expected: new Date(2023, 0, 1, 0, 0) },
{ date: "2022-12-31", time: "23:59", expected: new Date(2022, 11, 31, 23, 59) },
{ date: "2023-02-28", time: "13:45", expected: new Date(2023, 1, 28, 13, 45) },
{ date: "2023-03-01", time: "01:23", expected: new Date(2023, 2, 1, 1, 23) },
];
// Loop through the test cases and call the function with each pair of date and time
for (let testCase of testCases) {
// Call the function and store the result
const result = combineDateAndTime(testCase.date, testCase.time);
// Assert that the result is equal to the expected new date object
expect(result.getTime()).toEqual(testCase.expected.getTime());
}
});
it("addMinutes should add given time to date.", () => {
// Define some sample inputs and their expected outputs
const testCases = [
{
date: new Date(2023, 9, 12, 12, 0),
minutes: 15,
expected: new Date(2023, 9, 12, 12, 15),
},
{
date: new Date(2023, 0, 1, 0, 0),
minutes: -30,
expected: new Date(2022, 11, 31, 23, 30),
},
{
date: new Date(2022, 11, 31, 23, 59),
minutes: 1,
expected: new Date(2023, 0, 1, 0, 0),
},
{
date: new Date(2023, 1, 28, 13, 45),
minutes: 60,
expected: new Date(2023, 1, 28, 14, 45),
},
{
date: new Date(2023, 2, 1, 1, 23),
minutes: -1440,
expected: new Date(2023, 1, 28, 1, 23),
},
];
// Loop through the test cases and call the function with each pair of date and minutes
for (let testCase of testCases) {
// Call the function and store the result
const result = addMinutes(testCase.date, testCase.minutes);
// Assert that the result is equal to the expected modified date object
expect(result.getTime()).toEqual(testCase.expected.getTime());
}
});
it("shortTimeString should return time in short format.", () => {
// Define some sample dates and their expected short time strings
const testCases = [
{ date: new Date(2023, 9, 12, 12, 0), expected: "12:00 PM" },
{ date: new Date(2023, 0, 1, 0, 0), expected: "12:00 AM" },
{ date: new Date(2022, 11, 31, 23, 59), expected: "11:59 PM" },
{ date: new Date(2023, 1, 28, 13, 45), expected: "1:45 PM" },
{ date: new Date(2023, 2, 1, 1, 23), expected: "1:23 AM" },
];
// Loop through the test cases and call the function with each date
for (let testCase of testCases) {
// Call the function and store the result
const result = shortTimeString(testCase.date);
// Assert that the result is equal to the expected short time string
expect(result).toEqual(testCase.expected);
}
});
});

View file

@ -0,0 +1,250 @@
// Components
import addToCalendar from "@/layouts/add-to-calendar/add-to-calendar.vue";
import { calendarOptions } from "@/constants/calendar-options";
import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
beforeEach(() => {
jest.restoreAllMocks();
jest.clearAllMocks();
store.getters = {
order: {
schedule: {
date: "2019-01-01",
startTime: "09:00",
endTime: "10:00",
routeCode: "000",
},
lineItems: {
glassParts: [
{
partNumber: "ABC123",
},
],
supportingItems: [],
},
serviceLocation: {
address: "",
address2: null,
city: "",
state: "AZ",
appointmentType: "Inshop",
zipCode: "12345",
zipCodeCtu: "01234",
provider: {
providerNumber: "123",
address: {
streetAddress: "test1",
city: "test",
state: "AZ",
zipCode: "12345",
zipCodeCtu: "01234",
},
},
},
damage: {
isRepair: false,
},
referralNumber: "1234567",
},
payment: {
isInsurance: true,
},
lineItems: {
glassParts: [],
supportingItems: [],
},
};
});
afterEach(() => {
store.getters = {};
jest.restoreAllMocks();
jest.clearAllMocks();
});
describe("Add-to-calendar methods...", () => {
test("Add-to-calendar should trigger openModal method", () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.openCalendarModal();
//Assert
expect(wrapper.vm.$refs.calendarModalQuestion.openModal).toBeCalled();
});
test("serviceType should return 'replacement and recalibration' when isRepair and funnelHasRecalibrationPart true.", () => {
//Arrange
store.getters.order.damage.isRepair = true;
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 true and funnelHasRecalibrationPart is false.", () => {
//Arrange
store.getters.order.damage.isRepair = true;
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 false.", () => {
//Arrange
store.getters.order.damage.isRepair = false;
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({});
//Act
const testValue = wrapper.vm.getCalendarData(type);
//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 = true;
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 = false;
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 = false;
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({});
wrapper.vm.getAppointment = jest.fn();
//Act
wrapper.vm.setCalendarAppointment(newValue);
//Assert
expect(wrapper.vm.getAppointment).toHaveBeenCalled();
});
test("setCalendarAppointment should call window.open for Google, yahoo and Outlook.com.", () => {
//Arrange
const newValue = { name: calendarOptions.GOOGLE };
const { wrapper } = setupMocks({});
window.open = jest.fn();
//Act
wrapper.vm.setCalendarAppointment(newValue);
//Assert
expect(window.open).toHaveBeenCalledTimes(1);
});
});
function setupMocks({ customMountOptions }) {
const mountOptions = getMountOptions({
...customMountOptions,
});
const wrapper = shallowMount(addToCalendar, mountOptions);
//wrapper.vm.setCmsContent = jest.fn();
//wrapper.vm.$refs.datePicker.initializeComponent = jest.fn();
//wrapper.vm.$refs.locationAlerts.initializeComponent = jest.fn();
//wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn();
return { wrapper };
}

View file

@ -0,0 +1,300 @@
<template>
<div class="calendar-section">
<div class="add-to-calendar">
<button v-on:click="openCalendarModal">
<span class="add-to-calendar-span">
<img src="@/assets/img/icons/add-to-calendar.svg" class="add-to-calendar-img" />
<span class="add-to-calendar-text">Add to calendar</span></span
>
</button>
</div>
<calendarModalQuestion
ref="calendarModalQuestion"
customComponentId="calendarModalQuestion"
cmsWidgetName="CalendarModalQuestion"
@calendar-modal-closed="calendarModalClosed"
:calendarOptionsData="calendarValues"
v-model="selectedCalendarOption">
</calendarModalQuestion>
</div>
</template>
<script>
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 { getCalendarFile, download } from "@/helpers/add-to-calendar-helper";
import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants";
import store from "@/store";
export default {
name: "add-to-calendar",
components: {
calendarModalQuestion,
},
data() {
return {
appointment: this.getappointmentData(),
selectedCalendarOption: null,
};
},
computed: {
calendarValues: {
get: function () {
var obj = [];
const options = Object.values(calendarOptions);
for (var i = 0; i < options.length; i++) {
obj[i] = this.getCalendarData(options[i]);
}
return obj;
},
},
},
watch: {
selectedCalendarOption(newValue) {
if (newValue) {
this.setCalendarAppointment(newValue);
}
},
},
methods: {
setCalendarAppointment(calendarOption) {
if (
calendarOption.name.includes(calendarOptions.ICAL) ||
calendarOption.name.includes(calendarOptions.OUTLOOK)
) {
this.getAppointment();
} else {
window.open(calendarOption.url);
}
},
calendarModalClosed() {
// Clear the selectedOption if close the modal
this.selectedCalendarOption = null;
},
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 "replacement and recalibration";
} else {
return "replacement";
}
}
return "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";
const outlookComTimeSpanFormat = "yyyy-MM-ddTHH:mm:ss";
if (type == calendarOptions.OUTLOOKCOM) {
URL = `https://outlook.office.com/calendar/deeplink/compose?path=/calendar/action/compose&rru=addevent&startdt=${encodeURIComponent(
getDateFormat(this.appointment.StartDate, outlookComTimeSpanFormat)
)}&enddt=${encodeURIComponent(
getDateFormat(this.appointment.EndDate, outlookComTimeSpanFormat)
)}&subject=${encodeURIComponent(
this.appointment.Subject
)}&body=${encodeURIComponent(this.appointment.Body)}&location=${encodeURIComponent(
this.appointment.Location
)}`;
}
if (type == calendarOptions.GOOGLE) {
URL = `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(
this.appointment.Subject
)}&dates=${encodeURIComponent(
getDateFormat(this.appointment.StartDate, dateFormat)
)}/${encodeURIComponent(
getDateFormat(this.appointment.EndDate, dateFormat)
)}&details=${encodeURIComponent(
this.appointment.Body
)}&location=${encodeURIComponent(this.appointment.Location)}&sf=true&output=xml`;
}
if (type == calendarOptions.YAHOO) {
URL = `https://calendar.yahoo.com/?v=60&TITLE=${encodeURIComponent(
this.appointment.Subject
)}&DESC=${encodeURIComponent(this.appointment.Body)}&ST=${encodeURIComponent(
getDateFormat(this.appointment.StartDate, dateFormat)
)}&DUR=${this.appointment.Duration}&in_loc=${encodeURIComponent(
this.appointment.Location
)}`;
}
return {
url: URL,
name: type,
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("~", ">");
const calFile = {
Location: this.appointment.Location,
Body: body,
IsHTML: this.appointment.IsHTML,
UniqueId: this.appointment.RefrrlSeqNum,
Subject: this.appointment.Subject,
StartDate: this.appointment.StartDate,
EndDate: this.appointment.EndDate,
Status: calendarStatus.BUSY,
};
var calBody = getCalendarFile(calFile);
download("SafeliteAppointment.ics", calBody);
},
},
};
</script>
<style scoped>
.add-to-calendar-text {
margin: 0 0 0 7px;
color: #1574a1;
vertical-align: middle;
font-weight: 500;
font-family: "Roboto";
}
.add-to-calendar button {
border: 0;
background-color: #fff;
}
.calendar-section {
display: table;
position: relative;
margin: 0 auto;
}
.calendar-section .add-to-calendar {
padding-top: 15px;
}
.calendar-section .add-to-calendar .add-to-calendar-span {
cursor: pointer;
}
.calendar-section .add-to-calendar .add-to-calendar-img {
display: inline;
width: 20px;
}
</style>

View file

@ -0,0 +1,79 @@
<template>
<baseInputButton
v-bind="$props"
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2"
v-model="selectedValue">
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0 position-relative" :class="textPosition">
<img :src="buttonLabel" />
<span class="calendar-text">{{ value }}</span>
</span>
</div>
</baseInputButton>
</template>
<script>
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "calendarModalListButton",
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},
};
</script>
<style lang="scss" scoped>
.list-button {
outline: none;
input[type="radio"],
input[type="checkbox"] {
position: static; //override bootstrap
&:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content {
color: $black;
font-weight: 500;
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked + .list-button-content p,
&:checked + .list-button-content span {
font-weight: 500;
}
&:checked + .list-button-content span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
.list-button-content {
color: $gray-600;
position: relative;
background: $white;
transition: all 150ms linear;
border-radius: $border-radius-lg;
border: 1px solid $gray-500;
width: 100%;
outline: none;
span.calendar-text {
margin-left: 5px;
padding: 2px 8px;
}
}
.position-relative {
position: relative;
}
</style>

View file

@ -0,0 +1,53 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import calendarModalQuestion from "@/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.vue";
describe("calendar-modal-question.vue", () => {
test("When selected calendar option is changed, a correctly selectedCalendarOption should be emitted", async () => {
//Arrange
const url = "iCal url";
const name = "iCal";
const icon = "iCal.svg";
const expectedEmit = [
[
{
url: url,
name: name,
icon: icon,
},
],
];
const { wrapper } = setupMocks({
customMountOptions: {
propsData: {
calendarOptionsData: [
{
url: url,
name: name,
icon: icon,
},
],
},
},
});
wrapper.vm.$refs.calendarOptions.closeModal = jest.fn();
wrapper.vm.selectedCalendarOption = name;
//Act
wrapper.vm.setSelectedCalendarOption();
//Assert
expect(wrapper.emitted()["update:modelValue"]).toEqual(expectedEmit);
});
});
function setupMocks({ customMountOptions }) {
const mountOptions = getMountOptions({
...customMountOptions,
});
const wrapper = shallowMount(calendarModalQuestion, mountOptions);
return { wrapper };
}

View file

@ -0,0 +1,179 @@
<template>
<modal
:ref="modalName"
:fontSize="true"
:headerText="modalHeaderText"
:footerButtonText="footerCloseButtonText"
:onModalClosedCallback="onModalClosed"
@isModalOpened="setModalStatus"
@footer-button-event="setSelectedCalendarOption"
class="calendar-modal">
<template v-if="isModalOpened">
<buttonQuestion
ref="buttonQuestion"
buttonTypeString="calendarModalListButton"
:buttonTypeObject="calendarModalListButton"
:answers="getCalendarOptionData"
groupName="chooseCalendarType"
class="mt-1"
textPosition="text-center"
v-model="selectedCalendarOption"
isRequired
validationRules="calendar-option-required" />
</template>
</modal>
</template>
<script>
import modal from "@/digital-components/modal/modal";
import buttonQuestion from "@/digital-components/button-question/button-question";
import calendarModalListButton from "./calendar-modal-list-button/calendar-modal-list-button";
import { defineRule, useField } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { deepClone } from "@/helpers/object-helper";
import { v4 as uuidv4 } from "uuid";
// Validation for the modal button
defineRule("calendar-option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "calendar-modal-question",
components: {
modal,
buttonQuestion,
},
props: {
calendarOptionsData: Object,
modelValue: {
type: Object,
default: () => ({
url: null,
name: null,
icon: null,
}),
},
},
data() {
return {
isModalOpened: false,
selectedValue: null,
calendarModalListButton: calendarModalListButton,
};
},
setup(props) {
const uuid = uuidv4();
const componentId = !props.customComponentId
? `component-${uuid}`
: props.customComponentId;
const modelValue = deepClone(props).modelValue;
const initialValue = modelValue;
const fieldOptions = {
value: modelValue,
initialValue: initialValue,
};
const { errorMessage, handleChange, meta, validate, errors } = useField(
componentId,
props.validationRules,
fieldOptions
);
return {
componentId,
errorMessage,
handleChange,
validate,
meta,
errors,
};
},
watch: {
modelValue: {
handler(newValue) {
this.handleChange(newValue);
},
deep: true,
},
},
computed: {
modalName() {
return "calendarOptions";
},
modalHeaderText() {
return "Add to Calendar";
},
footerCloseButtonText() {
return "Add to Calendar";
},
modal() {
return this.$refs[this.modalName];
},
selectedCalendarOption: {
get: function () {
return this.modelValue?.name;
},
set: function (newValue) {
// Button Question only supports Number, or String data types so we must convert to the full object before emitting
this.selectedValue = this.getSelectedCalendarObject(newValue);
},
},
getCalendarOptionData() {
return this.calendarOptionsData.map((item) => {
return {
value: item.name,
buttonLabel: item.icon,
};
});
},
},
methods: {
openModal() {
this.modal.openModal();
},
setModalStatus(isOpened) {
this.isModalOpened = isOpened;
},
closeModal() {
this.modal.closeModal();
},
onModalClosed() {
this.$emit("calendar-modal-closed");
},
async setSelectedCalendarOption() {
this.$emit("update:modelValue", this.selectedValue);
this.closeModal();
},
getSelectedCalendarObject(calendarOptionId) {
const calendarOption = this.calendarOptionsData?.find(
(calendarOption) => calendarOption.name == calendarOptionId
);
if (calendarOption) {
return {
url: calendarOption.url,
name: calendarOption.name,
icon: calendarOption.icon,
};
}
return {
url: null,
name: null,
icon: null,
};
},
},
};
</script>
<style lang="scss" scoped>
.calendar-modal.modal.modal-component {
> .modal-dialog > .modal-content {
margin-top: 24px;
}
.modal-header {
padding-bottom: 0;
margin-bottom: 0 !important;
}
}
</style>

View file

@ -1,5 +1,7 @@
// Components
import confirmation from "@/layouts/confirmation/confirmation.vue";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { applicationConfig } from "@/constants/application-config.js";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
@ -12,14 +14,14 @@ import router from "@/router";
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
var wordingText = "wording Text {custom:ADDRESS}";
beforeEach(() => {
jest.restoreAllMocks();
jest.clearAllMocks();
store.getters = {
order: {
schedule: {
date: "2019-01-01",
date: "2023-01-01",
startTime: "09:00",
endTime: "10:00",
routeCode: "000",
@ -33,9 +35,9 @@ beforeEach(() => {
supportingItems: [],
},
serviceLocation: {
address: "",
address2: null,
city: "",
address: "test",
address2: "123",
city: "test",
state: "AZ",
appointmentType: "Inshop",
zipCode: "12345",
@ -112,8 +114,188 @@ describe("confirmation.vue", () => {
expect(window.location.assign).toHaveBeenCalled();
});
});
describe("computed properties...", () => {
test("ScheduleDateFormatted should return date in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleDateFormatted;
// Assert
expect(testValue).toEqual("Sunday, January 1");
});
test("ScheduleTimeFormatted should return mobile time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleTimeFormatted;
// Assert
expect(testValue).toEqual("Between 9 AM - 11 AM");
});
test("ScheduleTimeFormatted should return DROP_OFF time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleTimeFormatted;
// Assert
expect(testValue).toEqual("Drop off before 9:30 AM");
});
test("ScheduleTimeFormatted should return Inshop time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleTimeFormatted;
// Assert
expect(testValue).toEqual("at 9:00 AM");
});
test("AppointmentWordingText should return mobile text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.AppointmentWordingText;
// Assert
expect(testValue).toEqual("wording Text 123, test,<br/> test, AZ 12345");
});
test("AppointmentWordingText should return DROP_OFF text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.AppointmentWordingText;
// Assert
expect(testValue).toEqual("wording Text test1,<br/> test, AZ 12345");
});
test("AppointmentWordingText should return IN_SHOP text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.AppointmentWordingText;
// Assert
expect(testValue).toEqual("wording Text test1,<br/> test, AZ 12345");
});
test("ConfirmationEmailText should return text in expected format.", () => {
//Arrange
wordingText = "{custom:MY_ACCOUNT_URL}";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ConfirmationEmailText;
// Assert
expect(testValue).toEqual(applicationConfig.MY_ACCOUNT);
});
test("ScheduleDate should return date in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleDate;
// Assert
expect(testValue).toEqual("2023-01-01");
});
test("ScheduleStartTime should return time in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleStartTime;
// Assert
expect(testValue).toEqual("09:00");
});
test("ScheduleEndTime should return time in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ScheduleEndTime;
// Assert
expect(testValue).toEqual("10:00");
});
test("InShopWordingText should return text in expected format.", () => {
//Arrange
wordingText = "InShopWordingText format";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.InShopWordingText;
// Assert
expect(testValue).toEqual(wordingText);
});
test("MobileWordingText should return text in expected format.", () => {
//Arrange
wordingText = "MobileWordingText format";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.MobileWordingText;
// Assert
expect(testValue).toEqual(wordingText);
});
test("DropOffWordingText should return text in expected format.", () => {
//Arrange
wordingText = "DropOffWordingText format";
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.DropOffWordingText;
// Assert
expect(testValue).toEqual(wordingText);
});
test("ServiceLocationFullAddress should return text in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ServiceLocationFullAddress;
// Assert
expect(testValue).toEqual("123, test,<br/> test, AZ 12345");
});
test("ProviderFullAddress should return text in expected format.", () => {
//Arrange
const { wrapper } = setupMocks({});
// Act
const testValue = wrapper.vm.ProviderFullAddress;
// Assert
expect(testValue).toEqual("test1,<br/> test, AZ 12345");
});
});
const wordingText = "wording Text";
function setupMocks({ customMountOptions }) {
const mountOptions = getMountOptions({
...customMountOptions,

View file

@ -10,6 +10,10 @@
<img :src="ScheduleConfirmationImage" />
<span v-html="ScheduleConfirmationText"></span>
</div>
<div
class="appoinmenttext"
v-html="this.getAppointmentWordingText"></div>
<div class="main">
<div>
<vehicleBanner
@ -20,21 +24,8 @@
<p>{{ this.ScheduleDateFormatted }}</p>
<p>{{ this.ScheduleTimeFormatted }}</p>
</div>
<addToCalendar></addToCalendar>
<div class="calendar-section">
<div class="add-to-calendar">
<button>
<span class="add-to-calendar-span">
<img
src="~@/assets/img/icons/add-to-calendar.svg"
class="add-to-calendar-img" />
<span class="add-to-calendar-text"
>Add to calendar</span
></span
>
</button>
</div>
</div>
<div
class="appoinmenttext"
v-html="this.AppointmentWordingText"></div>
@ -58,6 +49,7 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
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";
@ -243,6 +235,7 @@ export default {
Form,
navbar,
vehicleBanner,
addToCalendar,
},
};
</script>

View file

@ -17,8 +17,8 @@
<cart
:damage="damageInfo"
:storeLineItems="storeLineItems"
:availableLineItems="cartItems"
:availableLineItems="availableLineItems"
:lineItems="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
@cart-remove="cartRemove" />
@ -34,10 +34,50 @@
<add-vaps-modal-buttons
:cartItems="cartItems"
:wiperItems="availableWipers"
:rainDefenseItem="availableRainDefense"
vapsTilesCmsName="VapsProductTiles" />
:availableLineItems="availableLineItems"
vapsTilesCmsName="VapsProductTiles"
v-on="{ 'buttonEvent.openModal': openModal }" />
<div>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="We accept Visa" />
</button>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="Mastercard" />
</button>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="American Express" />
</button>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="and Discover" />
</button>
</div>
<div>
<button v-on:click="paypal">
<img
src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png"
alt="PayPal" />
</button>
</div>
<div>
<button v-on:click="afterpay">
<img
src="https://business.afterpay.com/rs/539-RJA-633/images/AP_logo_badge_6328x2204_blackmint_png.png"
width="100"
height="26"
alt="Afterpay" />
</button>
</div>
<button @click="openModal('RainDefenseModal')">OPEN MODAL</button>
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<paymentMethodQuestion
v-if="!isPiaDisabled"
v-model="paymentMethodInternalModel" />
@ -64,6 +104,7 @@ import paymentMethodQuestion from "@/layouts/payment-method/payment-method-quest
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import addVapsModalButtons from "@/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
import alert from "@/ux-components/alert/alert";
@ -88,11 +129,14 @@ export default {
null,
"payment-method"
);
const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_RAIN_DEFENSE,
null,
"payment-method"
);
console.log("rainDefensePromise: ", rainDefensePromise);
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
@ -119,16 +163,17 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = store.getters.order.lineItems.glassParts
? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
: [];
const glassParts = (await store.getters.order.lineItems.glassParts) ?? [];
const availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...clonedGlassParts,
...glassParts,
];
const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
const pricedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: availableLineItems,
@ -136,30 +181,25 @@ export default {
"payment-method",
false
);
const storeLineItems = store.getters.lineItems;
const cartItems = [
...clonedGlassParts,
...storeLineItems.supportingItems,
...storeLineItems.vaps,
];
const lineItems = store.getters.lineItems;
const cartItems = [...glassParts, ...lineItems.supportingItems, ...lineItems.vaps]; // TOBEREMOVED BY AJC IN CSR-1384
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.cartItems = cartItems; // TOBEREMOVED BY AJC IN CSR-1384
vm.setCmsContent(resultMap.cmsContent);
vm.availableLineItems = pricingResults;
vm.availableWipers = resultMap.wipers;
vm.availableRainDefense = resultMap.rainDefense;
vm.cartItems = cartItems;
vm.availableLineItems = pricedAvailableLineItems;
vm.lineItems = lineItems;
});
},
data() {
return {
cartItems: [],
availableWipers: null,
availableRainDefense: null,
availableLineItems: null,
supportingItems: null,
pricedGlassParts: null,
cartItems: [], // TOBEREMOVED BY AJC IN CSR-1384
lineItems: [],
availableLineItems: [],
displayPaypalAlert: this.getPaypalAlert(),
paymentMethodInternalModel: null,
};
@ -217,6 +257,9 @@ export default {
packageReqs && serviceLocationReqs && isInsuranceSet && scheduleReqs && customerReqs
);
},
openModal(modalName) {
this.$refs[modalName].openModal();
},
getPaypalAlert() {
return store.getters.order.payment.piaErrorCode ? true : false;
},
@ -231,7 +274,7 @@ export default {
const matchedIndices = [];
this.cartItems.forEach((cartItem, i) => {
if (cartItem.partType === item.partType) {
console.log("adding this to matchedIndices: ", i);
// console.log("adding this to matchedIndices: ", i);
matchedIndices.push(i);
}
});
@ -284,12 +327,9 @@ export default {
},
computed: {
damageInfo() {
// console.log("this.$store.getters.damage ", this.$store.getters.damage)
return this.$store.getters.damage;
},
storeLineItems() {
// console.log("storeLineItems, aka lineItems from store: ", this.$store.getters.lineItems)
return this.$store.getters.lineItems;
},
customCtaCopy() {
switch (this.paymentMethod) {
case paymentMethods.CREDIT_CARD:
@ -332,6 +372,7 @@ export default {
cart,
alert,
addVapsModalButtons,
contentGroupModal,
paymentMethodQuestion,
},
};

View file

@ -14,6 +14,7 @@ import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper
import { deepEqual } from "@/helpers/object-helper";
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { deepClone } from "@/helpers/object-helper";
import { queryStrings } from "@/constants/query-strings";
import { partTypeStrings } from "@/constants/part-type-strings";
import {
@ -2067,9 +2068,9 @@ export const actions = {
context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
availableLineItems = addPricesToLineItems(availableLineItems, response.data.lineItems);
const pricedLineItems = addPricesToLineItems(availableLineItems, response.data.lineItems);
return availableLineItems;
return pricedLineItems;
},
// Misc order actions
@ -2277,7 +2278,8 @@ function convertGlassPieceNamingFromApi(glassArray) {
}
function addPricesToLineItems(lineItems, pricingLineItems) {
lineItems.forEach((lineItem) => {
const pricedLineItems = deepClone(lineItems);
pricedLineItems.forEach((lineItem) => {
let lineItemIndex = pricingLineItems.findIndex(
(pricingLineItem) => pricingLineItem.partNumber === lineItem.partNumber
);
@ -2289,7 +2291,7 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
lineItem.sellingPrice = pricedLineItem.sellingPrice;
lineItem.kitPrice = pricedLineItem.kitPrice;
});
return lineItems;
return pricedLineItems;
}
function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {