From a1ad878908b2f88c7d92440408646f039f57ca2b Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 7 Mar 2024 10:41:01 -0500 Subject: [PATCH 01/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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/35] 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 d9d4b14d08e11650e10ccceaad7abd63f8c61be6 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 8 Mar 2024 15:21:21 -0500 Subject: [PATCH 08/35] SSR-1081 credit card error alert --- src/layouts/payment-page/payment-page.spec.js | 22 +++++++++++++-- src/layouts/payment-page/payment-page.vue | 28 ++++++++++++++++++- src/router/index.js | 2 +- 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src/layouts/payment-page/payment-page.spec.js b/src/layouts/payment-page/payment-page.spec.js index 4aea7c28..1a4fcb80 100644 --- a/src/layouts/payment-page/payment-page.spec.js +++ b/src/layouts/payment-page/payment-page.spec.js @@ -6,6 +6,7 @@ import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper'; import { useMainStore } from '@/store'; import { paymentMethods, hopPaymentMethods } from '@/constants/payment-method-constants.js'; +import queryStrings from '@/constants/query-strings'; // Constants const parts = { @@ -116,10 +117,10 @@ jest.mock('@/helpers/cms-content-helper', () => ({ fetchCmsContentForPage: () => Promise.resolve('content') })); -function setupMocks({ customMountOptions }) { +function setupMocks({ customMountOptions = {}, queryString }) { const mountOptions = getMountOptions({ ...customMountOptions, - route: { query: { issPage: 'page-name' }, params: {} } + route: { query: { issPage: 'page-name', ...queryString }, params: {} } }); // set all mock stuff @@ -450,4 +451,21 @@ describe('payment-page.vue', () => { expect(clickFn).not.toBeCalled(); }); }); + + describe('Credit Card Error Alert', () => { + test('show credit card error alert', () => { + // Arrange + const queryString = { + [queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.CREDIT_CARD + }; + const wrapper = setupMocks({ queryString }); + + // Act + + // Assert + const creditCardErrorAlert = wrapper.findComponent({ ref: 'payInAdvanceCreditCardErrorAlert' }); + expect(creditCardErrorAlert.exists()).toBeTruthy(); + expect(creditCardErrorAlert.isVisible()).toBeTruthy(); + }); + }); }); diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index b230d5ee..49afdb03 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -4,6 +4,15 @@
+ +