From a1ad878908b2f88c7d92440408646f039f57ca2b Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 10:41:01 -0500 Subject: [PATCH 01/21] calendar modal list button --- .../calendar-modal-list-button.vue | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue new file mode 100644 index 00000000..1207cdf7 --- /dev/null +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue @@ -0,0 +1,81 @@ + + + From bc888516200a065b8a1a369b4fefba77e93e4c72 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 10:42:12 -0500 Subject: [PATCH 02/21] calendar modal question --- .../calendar-modal-question.vue | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue new file mode 100644 index 00000000..28a866db --- /dev/null +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -0,0 +1,176 @@ + + + From 6984ca9be9f6a43fc8a7b33a2e80090911d8bf5c Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 11:38:29 -0500 Subject: [PATCH 03/21] add new constants --- src/constants/calendar-options.js | 8 ++++++++ src/constants/calendar-status.js | 7 +++++++ src/constants/service-type.js | 6 ++++++ 3 files changed, 21 insertions(+) create mode 100644 src/constants/calendar-options.js create mode 100644 src/constants/calendar-status.js create mode 100644 src/constants/service-type.js diff --git a/src/constants/calendar-options.js b/src/constants/calendar-options.js new file mode 100644 index 00000000..a6f7b363 --- /dev/null +++ b/src/constants/calendar-options.js @@ -0,0 +1,8 @@ +const calendarOptions = { + ICAL: 'iCal', + GOOGLE: 'Google', + OUTLOOK: 'Outlook', + OUTLOOKCOM: 'Outlook.com', + YAHOO: 'Yahoo' +}; +export default { calendarOptions }; diff --git a/src/constants/calendar-status.js b/src/constants/calendar-status.js new file mode 100644 index 00000000..f57865f0 --- /dev/null +++ b/src/constants/calendar-status.js @@ -0,0 +1,7 @@ +const calendarStatus = { + FREE: 'Free', + BUSY: 'Busy', + TENTATIVE: 'Tentative', + OUT_OF_THE_OFFICE: 'OutOfTheOffice' +}; +export default { calendarStatus }; diff --git a/src/constants/service-type.js b/src/constants/service-type.js new file mode 100644 index 00000000..26b4bbb4 --- /dev/null +++ b/src/constants/service-type.js @@ -0,0 +1,6 @@ +const serviceType = { + REPLACEMENT: 'replacement', + REPAIR: 'repair', + REPLACEMENT_AND_RECALIBRATION: 'replacement and recalibration' +}; +export default { serviceType }; From ab0e286c215fe8b5a17b50eaa568543cafe94ed8 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 11:38:47 -0500 Subject: [PATCH 04/21] add/update helpers --- src/helpers/add-to-calendar-helper.js | 75 +++++++++++++++++++++++++++ src/helpers/date-helper.js | 69 ++++++++++++++++++++++++ 2 files changed, 144 insertions(+) create mode 100644 src/helpers/add-to-calendar-helper.js diff --git a/src/helpers/add-to-calendar-helper.js b/src/helpers/add-to-calendar-helper.js new file mode 100644 index 00000000..b00f891b --- /dev/null +++ b/src/helpers/add-to-calendar-helper.js @@ -0,0 +1,75 @@ +import calendarStatus from '@/constants/calendar-status'; +import { getDateFormat } from '@/helpers/date-helper'; + +function ToCalendarFileString(str, replacementArg = '

') { + return str.replace('\r\n', replacementArg); +} + +export function getCalendarFile(calFile) { + const dateFormat = 'yyyyMMddTHHmmss'; + const 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:' + + '' + + '' + + '

' + + `${ + ToCalendarFileString(calFile.Body) + }`); + } else { + calEvent.push(`DESCRIPTION:${ToCalendarFileString(calFile.Body)}`); + } + } + calEvent.push('END:VEVENT'); + calEvent.push('END:VCALENDAR'); + return calEvent.join('\r\n'); +} + +export function download(filename, fileBody) { + const 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); +} diff --git a/src/helpers/date-helper.js b/src/helpers/date-helper.js index be8161e8..70f598a6 100644 --- a/src/helpers/date-helper.js +++ b/src/helpers/date-helper.js @@ -104,3 +104,72 @@ export function get12HourTimeFormat(time) { } return timeString.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); + // eslint-disable-next-line consistent-return + 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 padTo2Digits(time) { + // Use the built-in method toString() with a radix of 10 to convert the time value to a decimal string + // eslint-disable-next-line no-param-reassign + 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 + // If no, return the original string + ? `0${time}` : time; +} + +export function convertMsToTime(milliseconds) { + let seconds = Math.floor(milliseconds / 1000); + let minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + + seconds %= 60; + minutes %= 60; + // commenting to get 24 time format + // hours = hours % 24; + + return `${padTo2Digits(hours)}${padTo2Digits(minutes)}`; +} + +export function calculateDuration(startDate, endDate) { + if (startDate instanceof Date !== true) return; + if (endDate instanceof Date !== true) return; + // eslint-disable-next-line consistent-return + return convertMsToTime(endDate - startDate); +} + +export function combineDateAndTime(date, time) { + // Use the Date.parse() method to convert the date and time strings to a numeric value + const timestamp = Date.parse(`${date}T${time}`); + // Use the new Date() constructor to create a new date object from the numeric value + const 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 + // Return undefined if the input is not a valid date object + ? date.toLocaleTimeString('en-us', { hour: 'numeric', minute: 'numeric', hour12: true }) : undefined; +} From 5c9416e989985dc47ab60bb2966370c9bd071817 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 11:39:05 -0500 Subject: [PATCH 05/21] add to calendar setup --- .../add-to-calendar/add-to-calendar.vue | 313 ++++++++++++++++++ .../calendar-modal-question.vue | 1 + 2 files changed, 314 insertions(+) create mode 100644 src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue new file mode 100644 index 00000000..8c100d17 --- /dev/null +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -0,0 +1,313 @@ + + + diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue index 28a866db..39647d35 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -29,6 +29,7 @@ import { defineRule, useField } from 'vee-validate'; import errorMessages from '@/constants/error-messages.js'; import { required } from '@/helpers/validation-rules'; import { deepClone } from '@/helpers/object-helper'; +// eslint-disable-next-line import/no-extraneous-dependencies import { v4 as uuidv4 } from 'uuid'; import calendarModalListButton from './calendar-modal-list-button/calendar-modal-list-button.vue'; // Validation for the modal button From cda30c1cd7c460004910c5d28d011699faf8a0ca Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 16:34:16 -0500 Subject: [PATCH 06/21] WIP --- .../add-to-calendar/add-to-calendar.vue | 110 +++++++++--------- .../calendar-modal-list-button.vue | 4 +- .../calendar-modal-question.vue | 4 +- .../order-confirmation/order-confirmation.vue | 19 ++- 4 files changed, 78 insertions(+), 59 deletions(-) diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index 8c100d17..9f9b50bf 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -3,7 +3,7 @@

@@ -25,7 +25,7 @@ import { getDateFormat, addMinutes } from '@/helpers/date-helper.js'; import calendarModalQuestion from '@/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue'; import { AppointmentTypeStrings, RouteCodeFlags } from '@/constants/schedule-constants'; -import store from '@/store'; +import { useMainStore } from '@/store'; import calendarOptions from '@/constants/calendar-options'; import calendarStatus from '@/constants/calendar-status'; import { getCalendarFile, download } from '@/helpers/add-to-calendar-helper'; @@ -51,6 +51,10 @@ export default { scheduleStartTime: String, scheduleEndTime: String }, + setup() { + const mainStore = useMainStore(); + return { mainStore }; + }, data() { return { selectedCalendarOption: null @@ -67,64 +71,64 @@ export default { return obj; } }, - IsSameDayDropOff() { + isSameDayDropOff() { const todaysDate = new Date().toISOString().split('T')[0]; return this.scheduleDate === todaysDate; }, - AddToCalendar_Mobile_Subject() { + addToCalendar_Mobile_Subject() { return this.getCmsContent(this.mobileWidgetName, 'HeaderText'); }, - AddToCalendar_Mobile_Body() { + addToCalendar_Mobile_Body() { return this.getCmsContent(this.mobileWidgetName, 'BodyText'); }, - AddToCalendar_InShop_Subject() { + addToCalendar_InShop_Subject() { return this.getCmsContent(this.inShopWidgetName, 'HeaderText'); }, - AddToCalendar_InShop_Body() { + addToCalendar_InShop_Body() { return this.getCmsContent(this.inShopWidgetName, 'BodyText'); }, - AddToCalendar_DropOff_Subject() { + addToCalendar_DropOff_Subject() { return this.getCmsContent(this.dropOffWidgetName, 'HeaderText'); }, - AddToCalendar_DropOff_Body() { + addToCalendar_DropOff_Body() { return this.getCmsContent(this.dropOffWidgetName, 'BodyText'); }, - AddToCalendar_OvernightDropOff_Subject() { + addToCalendar_OvernightDropOff_Subject() { return this.getCmsContent(this.overnightDropOffWidgetName, 'HeaderText'); }, - AddToCalendar_OvernightDropOff_Body() { + addToCalendar_OvernightDropOff_Body() { return this.getCmsContent(this.overnightDropOffWidgetName, 'BodyText'); }, - AddToCalendar_AllDayDropOff_Subject() { + addToCalendar_AllDayDropOff_Subject() { return this.getCmsContent(this.allDayDropOffWidgetName, 'HeaderText'); }, - AddToCalendar_AllDayDropOff_Body() { + addToCalendar_AllDayDropOff_Body() { return this.getCmsContent(this.allDayDropOffWidgetName, 'BodyText'); }, - AddToCalendar_SameDayDropOff_Subject() { + addToCalendar_SameDayDropOff_Subject() { return this.getCmsContent(this.sameDayDropOffWidgetName, 'HeaderText'); }, - AddToCalendar_SameDayDropOff_Body() { + addToCalendar_SameDayDropOff_Body() { return this.getCmsContent(this.sameDayDropOffWidgetName, 'BodyText'); }, - UniqueId() { - return store.getters.submittedOrder.referralNumber?.toString(); + uniqueId() { + return this.mainStore.order.referralNumber?.toString(); }, - ServiceType() { - const { isRepair } = store.getters.submittedOrder.damage; - const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedOrder; + serviceType() { + const { isRepair } = this.mainStore.order.damage.isRepair; + const { hasRecalibrationPart } = this.mainStore; if (!isRepair) { - if (funnelHasRecalibrationPart) { + if (hasRecalibrationPart) { return serviceType.REPLACEMENT_AND_RECALIBRATION; } return serviceType.REPLACEMENT; } return serviceType.REPAIR; }, - RouteCode() { - return store.getters.submittedOrder.schedule.routeCode; + routeCode() { + return this.mainStore.order.schedule.routeCode; }, - Appointment() { + appointment() { let subject = ''; let location = ''; const startDateTime = combineDateAndTime(this.scheduleDate, this.scheduleStartTime); @@ -136,8 +140,8 @@ export default { if (this.appointmentType === AppointmentTypeStrings.MOBILE) { location = this.serviceLocationFullAddress?.replace('
', ''); subject = this.AddToCalendar_Mobile_Subject?.replace( - '{custom:SERVICETYPE}', - this.ServiceType + '{custom:serviceType}', + this.serviceType ); body = this.AddToCalendar_Mobile_Body; } else { @@ -165,21 +169,21 @@ export default { // eslint-disable-next-line brace-style } // normal time slot else { - subject = this.AddToCalendar_DropOff_Subject?.replace( - '{custom:SERVICETYPE}', - this.ServiceType + subject = this.addToCalendar_DropOff_Subject?.replace( + '{custom:serviceType}', + this.serviceType ); - body = this.AddToCalendar_DropOff_Body?.replace( - '{custom:ADDRESS}', + body = this.addToCalendar_DropOff_Body?.replace( + '{custom:address}', location ); } } else { - subject = this.AddToCalendar_InShop_Subject?.replace( - '{custom:SERVICETYPE}', - this.ServiceType + subject = this.addToCalendar_InShop_Subject?.replace( + '{custom:serviceType}', + this.serviceType ); - body = this.AddToCalendar_InShop_Body?.replace('{custom:ADDRESS}', location); + body = this.addToCalendar_InShop_Body?.replace('{custom:address}', location); } duration = calculateDuration(startDateTime, endDateTime); } @@ -227,40 +231,40 @@ export default { const outlookComTimeSpanFormat = 'yyyy-MM-ddTHH:mm:ss'; if (type === calendarOptions.OUTLOOKCOM) { URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent( - getDateFormat(this.Appointment.StartDate, outlookComTimeSpanFormat) + getDateFormat(this.appointment.startDate, outlookComTimeSpanFormat) )}&enddt=${encodeURIComponent( - getDateFormat(this.Appointment.EndDate, outlookComTimeSpanFormat) + getDateFormat(this.appointment.endDate, outlookComTimeSpanFormat) )}&subject=${encodeURIComponent( - this.Appointment.Subject - )}&body=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent( - this.Appointment.Location + this.appointment.subject + )}&body=${encodeURIComponent(this.appointment.body)}&location=${encodeURIComponent( + this.appointment.location )}`; } if (type === calendarOptions.GOOGLE) { URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent( - this.Appointment.Subject + this.appointment.subject )}&dates=${encodeURIComponent( - getDateFormat(this.Appointment.StartDate, dateFormat) + getDateFormat(this.appointment.startDate, dateFormat) )}/${encodeURIComponent( - getDateFormat(this.Appointment.EndDate, dateFormat) + getDateFormat(this.appointment.endDate, dateFormat) )}&details=${encodeURIComponent( - this.Appointment.Body - )}&location=${encodeURIComponent(this.Appointment.Location)}&sf=true&output=xml`; + this.appointment.body + )}&location=${encodeURIComponent(this.appointment.location)}&sf=true&output=xml`; } if (type === calendarOptions.YAHOO) { URL = `${applicationConfig.YAHOO_CALENDAR}&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 + 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, // eslint-disable-next-line import/no-dynamic-require, global-require - icon: require(`@/assets/img/icons/${type}.svg`) + // icon: require(`@/assets/img/icons/${type}.svg`) }; }, getAppointment() { @@ -283,7 +287,7 @@ export default { } }; - + --> diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue index 1207cdf7..df22a42a 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue @@ -27,7 +27,7 @@ export default { mixins: [inputButtonWrapperMixin] }; - + --> diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue index 39647d35..8f4cb42e 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -164,7 +164,7 @@ export default { } }; - + --> diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index f1bddf9e..6bf20cb9 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -25,6 +25,19 @@

{{ appointmentDateFormatted }}

{{ appointmentTimeFormatted }}

+
@@ -52,6 +65,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue'; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue'; +import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue'; // Supporting files import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; @@ -69,6 +83,7 @@ export default { siteHeader, vehicleBanner, siteFooter, + addToCalendar, // eslint-disable-next-line vue/no-reserved-component-names Form }, @@ -274,7 +289,7 @@ export default { } }; - + --> From 225e8d9d218e3efcc1220571e6c0fb9971e8a4b5 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Fri, 8 Mar 2024 15:12:23 -0500 Subject: [PATCH 07/21] uncomment --- .../order-confirmation/add-to-calendar/add-to-calendar.vue | 6 +++--- .../calendar-modal-list-button.vue | 4 ++-- .../calendar-modal-question/calendar-modal-question.vue | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index 9f9b50bf..50c5b403 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -262,7 +262,7 @@ export default { } return { url: URL, - name: type, + name: type // eslint-disable-next-line import/no-dynamic-require, global-require // icon: require(`@/assets/img/icons/${type}.svg`) }; @@ -287,7 +287,7 @@ export default { } }; - + diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue index df22a42a..1207cdf7 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue @@ -27,7 +27,7 @@ export default { mixins: [inputButtonWrapperMixin] }; - + diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue index 8f4cb42e..39647d35 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -164,7 +164,7 @@ export default { } }; - + From 2768c9a7f7845ed83077ac97ae069f7033bd7225 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Fri, 8 Mar 2024 15:52:59 -0500 Subject: [PATCH 08/21] some styling fixes --- .../order-confirmation/add-to-calendar/add-to-calendar.vue | 3 ++- .../calendar-modal-question/calendar-modal-question.vue | 2 ++ src/layouts/order-confirmation/order-confirmation.vue | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index 50c5b403..62eae0a3 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -305,7 +305,8 @@ export default { margin: 0 auto; } .calendar-section .add-to-calendar { - padding-top: 15px; + padding-top: 16px; + padding-bottom: 16px; } .calendar-section .add-to-calendar .add-to-calendar-span { cursor: pointer; diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue index 39647d35..2a7080dc 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -173,5 +173,7 @@ export default { padding-bottom: 0; margin-bottom: 0 !important; } + + overflow: hidden; } diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 0c060ace..9c9eb792 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -320,7 +320,7 @@ $page-side-padding: 1.5rem; color: $black; font-size: $h5-font-size; line-height: map-get($spacers, 6); - margin-bottom: 0.5rem; + margin-bottom: 0; + p { font-size: map-get($spacers, 4); From f8e4e2f7d48accf9bb520655f16c2a69bd219243 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Tue, 12 Mar 2024 13:07:29 -0500 Subject: [PATCH 09/21] SSR-1101 Enable Paypal --- src/constants/query-strings.js | 1 + src/helpers/order-helper.js | 10 ++-- src/layouts/payment-return/payment-return.vue | 1 + src/store/index.js | 9 ++-- src/store/store.spec.js | 47 ++++++++++++------- 5 files changed, 43 insertions(+), 25 deletions(-) diff --git a/src/constants/query-strings.js b/src/constants/query-strings.js index 576d1e5b..81d5ba7d 100644 --- a/src/constants/query-strings.js +++ b/src/constants/query-strings.js @@ -9,6 +9,7 @@ const queryStrings = Object.freeze({ CARD_TYPE: 'sgcardtype', DISPLAY_PAY_IN_ADVANCE_ALERT: 'displayPayInAdvanceAlert', ERROR: 'error', + TOKEN: 'token', LAST_FOUR: 'last_four', REFERENCE_NUMBER: 'req_reference_number', REFERRAL_SEQ_NUM: 'referralseqnum', diff --git a/src/helpers/order-helper.js b/src/helpers/order-helper.js index 33e7d3c4..8daf4b36 100644 --- a/src/helpers/order-helper.js +++ b/src/helpers/order-helper.js @@ -4,8 +4,8 @@ import { updateOrCreateISSCookie } from '@/helpers/cookie-helper'; /* Encapsulates asynchronous Save Session logic inside a promise to allow for Save Session queuing */ -async function saveSessionHelper(store) { - const savedSessionInfo = await store.saveSession(); +async function saveSessionHelper(store, options) { + const savedSessionInfo = await store.saveSession(options); if (savedSessionInfo) { store.setSaveSessionInfo(savedSessionInfo.data); } @@ -17,11 +17,11 @@ async function saveSessionHelper(store) { This will also set Referral information in the store after saving, and then update the cookie. To force synchronous behavior pass in 'true' for shouldAwaitSaveSessionQueue */ -export async function saveSession({ shouldAwaitSaveSessionQueue = false }) { +export async function saveSession({ shouldAwaitSaveSessionQueue = false, submitAfterSave = false }) { const store = useMainStore(); const saveSessionPromise = store.applicationUser.saveSessionPromise - ? store.applicationUser.saveSessionPromise.then(() => saveSessionHelper(store)) - : saveSessionHelper(store); + ? store.applicationUser.saveSessionPromise.then(() => saveSessionHelper(store, { submitAfterSave })) + : saveSessionHelper(store, { submitAfterSave }); store.setSaveSessionPromise(saveSessionPromise); diff --git a/src/layouts/payment-return/payment-return.vue b/src/layouts/payment-return/payment-return.vue index 8e5d3de6..4a29f2ea 100644 --- a/src/layouts/payment-return/payment-return.vue +++ b/src/layouts/payment-return/payment-return.vue @@ -74,6 +74,7 @@ export default { await this.processCreditCardResponse(); break; case paymentMethods.PAYPAL: + await this.processPaypalResponse(); break; default: console.log(`Unknown pay in advance type: ${payInAdvanceType}`); diff --git a/src/store/index.js b/src/store/index.js index 7f0a595b..840994a5 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1145,7 +1145,7 @@ export const useMainStore = defineStore({ this.applicationUser.crmCustomerId = response.crmCustomerId.toString(); }, - saveSession() { + saveSession(options) { const { vehicle, damage, policy, customer, contactInfo, payment, lineItems, serviceLocation, schedule } = this.order; @@ -1233,7 +1233,9 @@ export const useMainStore = defineStore({ coverageStatus: payment.insuranceCoverage?.coverageStatus, claimNumber: payment.insuranceCoverage?.claimNumber }, - parentAccountNumber: this.issConfig.parentAccountNumber + parentAccountNumber: this.issConfig.parentAccountNumber, + paypalToken: payment.paypalToken, + isPaypal: payment.payInAdvanceType === paymentMethods.PAYPAL }, serviceLocation: { address: { @@ -1274,7 +1276,8 @@ export const useMainStore = defineStore({ referralSequenceNumber: this.order.referralSequenceNumber, eon: this.order.eon, submitToMainframe: !!this.order.referralNumber, - loadedFromDupeCheck + loadedFromDupeCheck, + submitAfterSave: !!options.submitAfterSave }, additionalSuccessEventDataHandler: () => `Email provided: ${customer.emailAddress ? 'true' : 'false'}` diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 3a44c37e..2faa74f8 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -503,7 +503,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -517,7 +517,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response)); // Act - const result = store.saveSession(); + const result = store.saveSession({}); // Asserts await expect(result).resolves.toBe(response); @@ -537,7 +537,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -570,7 +570,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -612,7 +612,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -659,7 +659,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -708,7 +708,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -742,7 +742,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -769,7 +769,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -802,7 +802,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -838,7 +838,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -861,7 +861,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -875,7 +875,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Assert expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -888,7 +888,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -904,7 +904,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -927,7 +927,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); // Act - await store.saveSession(); + await store.saveSession({}); // Asserts expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ @@ -947,7 +947,7 @@ describe('Store', () => { globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject(error)); // Act - await store.saveSession().catch((e) => { + await store.saveSession({}).catch((e) => { expect(e).toEqual(error); }); @@ -1887,4 +1887,17 @@ describe('Store', () => { expect(store.order.payment.payInAdvanceType).toEqual(paymentMethod); }); }); + + describe('updatePaypalToken method', () => { + it('paypalToken is valid when set', () => { + // Arrange + const paypalToken = getRandomString(6, 6); + + // Act + store.updatePaypalToken(paypalToken); + + // Assert + expect(store.order.payment.paypalToken).toEqual(paypalToken); + }); + }); }); From b0a053c48a9beca5e087f66d255eb15d1b013b45 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Wed, 13 Mar 2024 10:23:52 -0500 Subject: [PATCH 10/21] SSR-1011 cleanup & fix deductible pricing --- src/mixins/base-mixin.js | 4 ++++ src/store/index.js | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 0cbeec5b..3816d5c2 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -67,6 +67,10 @@ export default { }); }, getAmountDue(lineItems) { + if (!useMainStore().isNoComp && !useMainStore().policy.isITAC) { + return useMainStore().order.currentDeductible; + } + let amountDue = 0; if (lineItems.glassParts) { amountDue += this.getTotalPriceOfAllLineItemsAndChildParts( diff --git a/src/store/index.js b/src/store/index.js index 840994a5..a93d5b3d 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1145,7 +1145,7 @@ export const useMainStore = defineStore({ this.applicationUser.crmCustomerId = response.crmCustomerId.toString(); }, - saveSession(options) { + saveSession({ submitAfterSave }) { const { vehicle, damage, policy, customer, contactInfo, payment, lineItems, serviceLocation, schedule } = this.order; @@ -1277,7 +1277,7 @@ export const useMainStore = defineStore({ eon: this.order.eon, submitToMainframe: !!this.order.referralNumber, loadedFromDupeCheck, - submitAfterSave: !!options.submitAfterSave + submitAfterSave: !!submitAfterSave }, additionalSuccessEventDataHandler: () => `Email provided: ${customer.emailAddress ? 'true' : 'false'}` From ffaea18df7bd9b0614b9f76ccdc0e2ad3e1cfd84 Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Thu, 14 Mar 2024 12:39:50 -0500 Subject: [PATCH 11/21] SSR-1101 PR Changes --- src/helpers/order-helper.js | 4 ++-- src/store/store.spec.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/helpers/order-helper.js b/src/helpers/order-helper.js index 8daf4b36..97b685cd 100644 --- a/src/helpers/order-helper.js +++ b/src/helpers/order-helper.js @@ -4,8 +4,8 @@ import { updateOrCreateISSCookie } from '@/helpers/cookie-helper'; /* Encapsulates asynchronous Save Session logic inside a promise to allow for Save Session queuing */ -async function saveSessionHelper(store, options) { - const savedSessionInfo = await store.saveSession(options); +async function saveSessionHelper(store, { submitAfterSave }) { + const savedSessionInfo = await store.saveSession({ submitAfterSave }); if (savedSessionInfo) { store.setSaveSessionInfo(savedSessionInfo.data); } diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 2faa74f8..63e55894 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -941,6 +941,20 @@ describe('Store', () => { }) })); }); + it('calls api with expected submitAfterSave', async () => { + // Arrange + globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({})); + + // Act + await store.saveSession({ submitAfterSave: true }); + + // Asserts + expect(globalMethods.callHttpClient).toHaveBeenCalledWith(expect.objectContaining({ + payload: expect.objectContaining({ + submitAfterSave: true + }) + })); + }); it('api call throws exception', async () => { expect.assertions(2); const error = 'save session error'; From 57653a02d7ddf151bbea9b5dc84d8b3f2c3f8545 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 14 Mar 2024 14:09:52 -0400 Subject: [PATCH 12/21] calendar buttons working --- package-lock.json | 30 +++- package.json | 1 + src/assets/img/icons/Google.svg | 14 ++ src/assets/img/icons/Outlook.com.svg | 16 +++ src/assets/img/icons/Outlook.svg | 16 +++ src/assets/img/icons/Yahoo.svg | 13 ++ src/assets/img/icons/add-to-calendar.svg | 11 ++ src/assets/img/icons/iCal.svg | 11 ++ src/constants/calendar-options.js | 6 +- src/constants/calendar-status.js | 6 +- .../add-to-calendar/add-to-calendar.vue | 129 +++++++++--------- .../calendar-modal-question.vue | 12 +- 12 files changed, 191 insertions(+), 74 deletions(-) create mode 100644 src/assets/img/icons/Google.svg create mode 100644 src/assets/img/icons/Outlook.com.svg create mode 100644 src/assets/img/icons/Outlook.svg create mode 100644 src/assets/img/icons/Yahoo.svg create mode 100644 src/assets/img/icons/add-to-calendar.svg create mode 100644 src/assets/img/icons/iCal.svg diff --git a/package-lock.json b/package-lock.json index 26792b8c..4547f28b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "maska": "^1.5.0", "pinia": "^2.1.4", "pinia-plugin-persistedstate": "^2.2.0", + "uuid": "^9.0.1", "vee-validate": "^4.5.7", "vue": "^3.3.4", "vue-plugin-load-script": "^2.1.0", @@ -11599,6 +11600,15 @@ "node": ">=10" } }, + "node_modules/jest-junit/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/jest-leak-detector": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz", @@ -16662,6 +16672,15 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -17730,10 +17749,13 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", - "dev": true, + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "bin": { "uuid": "dist/bin/uuid" } diff --git a/package.json b/package.json index 9c287dc0..39dd64ab 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "maska": "^1.5.0", "pinia": "^2.1.4", "pinia-plugin-persistedstate": "^2.2.0", + "uuid": "^9.0.1", "vee-validate": "^4.5.7", "vue": "^3.3.4", "vue-plugin-load-script": "^2.1.0", diff --git a/src/assets/img/icons/Google.svg b/src/assets/img/icons/Google.svg new file mode 100644 index 00000000..606351ec --- /dev/null +++ b/src/assets/img/icons/Google.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/img/icons/Outlook.com.svg b/src/assets/img/icons/Outlook.com.svg new file mode 100644 index 00000000..467b585a --- /dev/null +++ b/src/assets/img/icons/Outlook.com.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/img/icons/Outlook.svg b/src/assets/img/icons/Outlook.svg new file mode 100644 index 00000000..f974fb13 --- /dev/null +++ b/src/assets/img/icons/Outlook.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/img/icons/Yahoo.svg b/src/assets/img/icons/Yahoo.svg new file mode 100644 index 00000000..0206eccb --- /dev/null +++ b/src/assets/img/icons/Yahoo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/img/icons/add-to-calendar.svg b/src/assets/img/icons/add-to-calendar.svg new file mode 100644 index 00000000..fd621c5c --- /dev/null +++ b/src/assets/img/icons/add-to-calendar.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/img/icons/iCal.svg b/src/assets/img/icons/iCal.svg new file mode 100644 index 00000000..399bcdea --- /dev/null +++ b/src/assets/img/icons/iCal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/constants/calendar-options.js b/src/constants/calendar-options.js index a6f7b363..22e9d5ef 100644 --- a/src/constants/calendar-options.js +++ b/src/constants/calendar-options.js @@ -1,8 +1,8 @@ -const calendarOptions = { +const calendarOptions = Object.freeze({ ICAL: 'iCal', GOOGLE: 'Google', OUTLOOK: 'Outlook', OUTLOOKCOM: 'Outlook.com', YAHOO: 'Yahoo' -}; -export default { calendarOptions }; +}); +export default calendarOptions; diff --git a/src/constants/calendar-status.js b/src/constants/calendar-status.js index f57865f0..5174f33a 100644 --- a/src/constants/calendar-status.js +++ b/src/constants/calendar-status.js @@ -1,7 +1,7 @@ -const calendarStatus = { +const calendarStatus = Object.freeze({ FREE: 'Free', BUSY: 'Busy', TENTATIVE: 'Tentative', OUT_OF_THE_OFFICE: 'OutOfTheOffice' -}; -export default { calendarStatus }; +}); +export default calendarStatus; diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index 62eae0a3..0e6e42e1 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -3,8 +3,11 @@
diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue index cc5c88af..4a02b72d 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -111,20 +111,11 @@ export default { this.selectedValue = this.getSelectedCalendarObject(newValue); } }, - // getCalendarOptionData() { - // return this.calendarOptionsData.map((item) => ({ - // value: item.name, - // buttonLabel: item.icon - // })); - // }, getCalendarOptionData() { - console.log(this.calendarOptionsData); - const calendarOptions = this.calendarOptionsData.map((item) => ({ + return this.calendarOptionsData.map((item) => ({ value: item.name, buttonLabel: item.icon })); - - return calendarOptions; }, watch: { modelValue: { diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 9c9eb792..871c2f50 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -26,12 +26,12 @@

{{ appointmentTimeFormatted }}

Date: Fri, 15 Mar 2024 15:56:46 -0400 Subject: [PATCH 17/21] unit tests for calendar components --- .../add-to-calendar/add-to-calendar.spec.js | 187 ++++++++++++++++++ .../calendar-modal-question.spec.js | 41 ++++ 2 files changed, 228 insertions(+) create mode 100644 src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js create mode 100644 src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js new file mode 100644 index 00000000..7efff67b --- /dev/null +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.spec.js @@ -0,0 +1,187 @@ +// Components +import calendarOptions from '@/constants/calendar-options'; + +// Supporting Files +import { shallowMount } from '@vue/test-utils'; +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { useMainStore } from '@/store'; +import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue'; + +const appointmentText = 'Appointment content'; +function setupMocks({ customMountOptions }) { + const mountOptions = getMountOptions({ + ...customMountOptions + }); + mountOptions.mixins = [ + { + methods: { + getCmsContent: jest.fn().mockImplementation(() => appointmentText) + } + } + ]; + const wrapper = shallowMount(addToCalendar, mountOptions); + wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn(); + return { wrapper }; +} + +beforeEach(() => { + jest.restoreAllMocks(); + jest.clearAllMocks(); + useMainStore().submittedOrder = { + 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 + } + }; +}); +afterEach(() => { + useMainStore().submittedOrder = {}; + jest.restoreAllMocks(); + jest.clearAllMocks(); +}); + +describe('Add-to-calendar methods...', () => { + test('Add-to-calendar should trigger openModal method', () => { + // Arrange + + 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(); + + // Assert + expect(wrapper.vm.$refs.calendarModalQuestion.openModal).toBeCalled(); + }); + + test('getCalendarData should return expected model value.', () => { + // Arrange + const type = calendarOptions.OUTLOOKCOM; + 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); + + // Assert + expect(testValue.name).toEqual(calendarOptions.OUTLOOKCOM); + }); + + test('setCalendarAppointment should call getAppointment method for iCAL and Outlook.', () => { + // Arrange + const newValue = { name: calendarOptions.OUTLOOK }; + 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); + + // 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({ + 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 + wrapper.vm.setCalendarAppointment(newValue); + + // Assert + expect(window.open).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js new file mode 100644 index 00000000..51b43508 --- /dev/null +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js @@ -0,0 +1,41 @@ +import { shallowMount } from '@vue/test-utils'; +import calendarModalQuestion from '@/layouts/order-confirmation/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, + name, + icon + } + ] + ]; + + const wrapper = shallowMount(calendarModalQuestion, { + propsData: { + calendarOptionsData: [ + { + url, + name, + icon + } + ] + } + }); + + wrapper.vm.$refs.calendarOptions.closeModal = jest.fn(); + wrapper.vm.selectedCalendarOption = name; + + // Act + wrapper.vm.setSelectedCalendarOption(); + + // Assert + expect(wrapper.emitted()['update:modelValue']).toEqual(expectedEmit); + }); +}); From 335e3c8f656690b3f9877bf7f4a46dae188c60ed Mon Sep 17 00:00:00 2001 From: Josh Dassinger Date: Mon, 18 Mar 2024 08:19:53 -0500 Subject: [PATCH 18/21] SSR-1134 Add Fees to Cart --- .../__snapshots__/cart-dropdown.spec.js.snap | 2 + .../cart-dropdown/cart-dropdown.spec.js | 89 +++++++++++- .../cart-dropdown/cart-dropdown.vue | 133 +++++++++++++----- .../service-location/service-location.vue | 24 ++-- src/store/index.js | 8 +- 5 files changed, 204 insertions(+), 52 deletions(-) diff --git a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap index f635c1f9..e6e66827 100644 --- a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap +++ b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap @@ -9,6 +9,8 @@ Object { "amountDue": "AmountDueTextWidget", "basePrice": "BasePriceWidget", "deductible": "DeductibleWidget", + "mobileFee": "MobileServiceWidget", + "recycleFee": "RecycleFeeWidget", "salesTax": "SalesTaxWidget", "subtotal": "SubtotalWidget", }, diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js index 8ef2cd50..fc09a48e 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js +++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js @@ -7,6 +7,7 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; import coverageStatuses from '@/constants/coverage-statuses'; import { formatAmountInDollars } from '@/helpers/text-helper.js'; +import partTypeStrings from '@/constants/part-type-strings'; const VERIFYING_COVERAGE = 'Verifying coverage'; @@ -41,7 +42,13 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, propsData describe('cart-dropdown component', () => { test('initial data rendered as expected', () => { // Arrange - const { wrapper } = getMountedComponent(); + const { wrapper } = getMountedComponent({ + order: { + lineItems: { + supportingItems: [] + } + } + }); // Assert expect(wrapper.vm.$data).toMatchSnapshot(); @@ -568,5 +575,85 @@ describe('cart-dropdown component', () => { expect(result).toBe(dollarAmount); }); }); + describe('Recyle fee', () => { + test('Shows recycle fee when preset in supported items', () => { + // Arrange + const reference = '#recycle-fee-item'; + const {wrapper} = getMountedComponent({ + order: { + lineItems: { + supportingItems: [{ + partType: partTypeStrings.REPLACE_FEE + }] + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.recycleFeeCartItem).not.toBeNull(); + expect(cartDeductible.exists()).toBeTruthy(); + }); + test('Hides recycle fee when not in supported items', () => { + // Arrange + const reference = '#recycle-fee-item'; + const {wrapper} = getMountedComponent({ + order: { + lineItems: { + supportingItems: [] + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.recycleFeeCartItem).toBeNull(); + expect(cartDeductible.exists()).toBeFalsy(); + }); + }); + describe('Mobile Fee', () => { + test('Shows mobile fee when preset', () => { + // Arrange + const reference = '#mobile-fee-item'; + const { wrapper } = getMountedComponent({ + order: { + lineItems: { + supportingItems: [], + mobileFee: {} + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.mobileFeeCartItem).not.toBeNull(); + expect(cartDeductible.exists()).toBeTruthy(); + }); + test('Hides recycle fee when not in supported items', () => { + // Arrange + const reference = '#mobile-fee-item'; + const { wrapper } = getMountedComponent({ + order: { + lineItems: { + supportingItems: [], + mobileFee: null + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.mobileFeeCartItem).toBeNull(); + expect(cartDeductible.exists()).toBeFalsy(); + }); + }); }); }); diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue index 498999bf..63f756bf 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.vue +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -21,7 +21,7 @@ class="color-darker-gray">
+ class="cart-item cart-gray">
- -
-
- + + +
- - - @@ -92,6 +116,8 @@ import textBlock from '@/digital-components/text-block/text-block.vue'; import textLink from '@/ux-components/text-link/text-link.vue'; import getPriceOfLineItems from '@/helpers/price-calculator.js'; import { formatAmountInDollars } from '@/helpers/text-helper.js'; +import baseMixin from '@/mixins/base-mixin'; +import partTypeStrings from '@/constants/part-type-strings'; import widgetFields from '@/constants/cms-widget-fields.js'; const VERIFYING_COVERAGE = 'Verifying coverage'; @@ -105,6 +131,10 @@ export default { recyclingModalCmsWidgetName: String, showAsPaid: Boolean }, + setup() { + const mainStore = useMainStore(); + return { mainStore }; + }, data() { const { currentDeductible } = useMainStore().order; const { supportingItems, glassParts, otherParts } = useMainStore().lineItems; @@ -122,7 +152,9 @@ export default { deductible: 'DeductibleWidget', basePrice: 'BasePriceWidget', subtotal: 'SubtotalWidget', - salesTax: 'SalesTaxWidget' + salesTax: 'SalesTaxWidget', + recycleFee: 'RecycleFeeWidget', + mobileFee: 'MobileServiceWidget' } }; }, @@ -163,6 +195,18 @@ export default { }, salesTaxLabel() { return this.getCmsContent(this.widget.salesTax, widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, + recycleFeeCartItem() { + return this.getCartItem( + this.getCmsContent(this.widget.recycleFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT), + this.mainStore.order.lineItems.supportingItems.find((lineItem) => lineItem.partType === partTypeStrings.REPLACE_FEE) + ); + }, + mobileFeeCartItem() { + return this.getCartItem( + this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT), + this.mainStore.order.lineItems.mobileFee + ); } }, methods: { @@ -176,6 +220,19 @@ export default { return this.isUnverified && this.showDeductibleLineItem ? VERIFYING_COVERAGE : formatAmountInDollars(amount); + }, + getCartItem(label, lineItem) { + let cartItem = null; + + if (lineItem) { + cartItem = { + name: label, + subTotal: baseMixin.methods.getTotalLineItemPrice(lineItem, false), + salesTax: lineItem.salesTax ?? 0 + }; + } + + return cartItem; } } }; @@ -201,13 +258,16 @@ export default { transition: all 350ms ease-in; overflow: hidden; visibility: hidden; + margin-top: 1rem; - .cart-deductible-or-base-price { - background-color: $gray-100; - margin-top: 1rem; + .cart-item { padding: 0.25rem 1.5rem; } + .cart-gray { + background-color: $gray-100; + } + .cart-footer { border-top: 1px solid $green; } @@ -269,6 +329,9 @@ export default { a { text-decoration: none; } +} +:deep(#recycle-fee-label a){ + line-height: initial; } diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 5fbb91c6..2f503879 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -340,8 +340,11 @@ export default { await this.$refs.shopQuestion.reloadShopData(zipCode); }, async forwardButtonAction() { - const providerToUse = this.isMobileLocationDisplayed - ? { + let provider = this.selectedProvider; + this.mainStore.updateMobileFee(null); + if (this.isMobileLocationDisplayed) { + this.mainStore.updateMobileFee(this.mobileFeePart); + provider = { providerNumber: this.mobileProviderNumber, address: { streetAddress: null, @@ -350,10 +353,10 @@ export default { zipCode: null, zipCodeCtu: null } - } - : this.selectedProvider; + }; + } - useMainStore().saveServiceLocation({ + this.mainStore.saveServiceLocation({ address: this.streetAddress, address2: this.streetAddress2, city: this.city, @@ -362,16 +365,7 @@ export default { zipCodeCtu: this.zipCodeCtu, appointmentType: this.selectedAppointmentType, isVehicleProtected: this.isVehicleProtected, - provider: { - providerNumber: providerToUse?.providerNumber, - address: { - streetAddress: providerToUse?.address?.streetAddress, - city: providerToUse?.address?.city, - state: providerToUse?.address?.state, - zipCode: providerToUse?.address?.zipCode, - zipCodeCtu: providerToUse?.address?.zipCodeCtu - } - } + provider }); this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route); diff --git a/src/store/index.js b/src/store/index.js index 6d5d8fb1..5b9e2bd9 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -147,7 +147,8 @@ const getDefaultState = () => ({ glassParts: null, otherParts: null, supportingItems: null, - vaps: null + vaps: null, + mobileFee: null }, payment: { insuranceCoverage: { @@ -1537,6 +1538,10 @@ export const useMainStore = defineStore({ this.order.lineItems.vaps = partsData; }, + updateMobileFee(mobileFee) { + this.order.lineItems.mobileFee = mobileFee; + }, + updateVehicle(vehicle) { // Assuming that the method caller pass all the properties. // otherwise need to check for undefined for every property. @@ -2249,6 +2254,7 @@ export const useMainStore = defineStore({ resetPartsAndDependencies() { this.resetGlassPartsState(); this.updateVaps(null); + this.updateMobileFee(null); this.resetServiceLocationAndDependencies(); }, From 506ef244f07e903e44e75626f6e79ef1b0022c4c Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 18 Mar 2024 14:17:49 -0400 Subject: [PATCH 19/21] final fixes --- src/layouts/order-confirmation/order-confirmation.spec.js | 7 ++++++- src/layouts/order-confirmation/order-confirmation.vue | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 99ba8fa7..47e0f137 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -39,6 +39,10 @@ const vehicleBannerStub = { render: () => {} }; +const addToCalendarStub = { + render: () => {} +}; + const initialStore = { order: { schedule: { @@ -127,7 +131,8 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu mountOptions.global.stubs = { siteFooter: footerStub, siteHeader: headerStub, - vehicleBanner: vehicleBannerStub + vehicleBanner: vehicleBannerStub, + addToCalendar: addToCalendarStub }; const testingPinia = createTestingPinia({ diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 871c2f50..f0364062 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -195,7 +195,7 @@ export default { }, providerFullAddress() { // eslint-disable-next-line max-len - return `${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}`; + return this.submittedOrder.serviceLocation?.provider?.address ? `${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}` : ''; }, appointmentWordingText() { switch (this.appointmentType) { From 0146e85fbd010035978d7bdd699b1dc621f176e6 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 18 Mar 2024 16:19:02 -0400 Subject: [PATCH 20/21] PR fixes --- .../order-confirmation/add-to-calendar/add-to-calendar.vue | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index 78e51491..014af7c5 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -87,9 +87,7 @@ export default { return this.getCmsContent(this.mobileWidgetName, 'BodyText'); }, AddToCalendar_InShop_Subject() { - const test = this.getCmsContent('AddToCalendar_InShop', 'HeaderText'); - console.log(test); - return test; + return this.getCmsContent('AddToCalendar_InShop', 'HeaderText'); }, AddToCalendar_InShop_Body() { return this.getCmsContent(this.inShopWidgetName, 'BodyText'); @@ -144,7 +142,8 @@ export default { const isHTML = false; let duration = ''; - if (this.appointmentType === AppointmentTypeStrings.MOBILE) { + if (this.appointmentType === AppointmentTypeStrings.MOBILE + || this.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) { location = this.serviceLocationFullAddress?.replace('
', ''); subject = this.AddToCalendar_Mobile_Subject?.replace( '{custom:serviceType}', From 9322ab7c39f0e2ed5a77013dbac81e6c46b810f1 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 18 Mar 2024 16:31:42 -0400 Subject: [PATCH 21/21] px to rem --- .../order-confirmation/add-to-calendar/add-to-calendar.vue | 4 ++-- .../calendar-modal-list-button.vue | 6 +++--- .../calendar-modal-question/calendar-modal-question.vue | 2 +- src/layouts/order-confirmation/order-confirmation.vue | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue index 014af7c5..ebd7eb47 100644 --- a/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue +++ b/src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue @@ -296,7 +296,7 @@ export default { diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue index 1207cdf7..814d10fe 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue @@ -65,13 +65,13 @@ export default { background: $white; transition: all 150ms linear; border-radius: $border-radius-lg; - border: 1px solid $gray-500; + border: 0.063rem solid $gray-500; width: 100%; outline: none; span.calendar-text { - margin-left: 5px; - padding: 2px 8px; + margin-left: 0.313rem; + padding: 0.125rem 0.5rem; } } diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue index 4a02b72d..702abf1b 100644 --- a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue +++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue @@ -168,7 +168,7 @@ export default {