diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css new file mode 100644 index 000000000..c307731f6 --- /dev/null +++ b/public/css/hop-styling.css @@ -0,0 +1,336 @@ +.btn-group-lg > .btn { + padding: 10px 20px; + font-size: 20px; + line-height: 1.3; + border-radius: 5px; +} +.btn-group-sm > .btn { + padding: 3px 6px; + font-size: 13px; + line-height: 1.5; + border-radius: 3px; +} +.btn-group-xs > .btn { + padding: 1px 5px; + font-size: 13px; + line-height: 1.5; + border-radius: 3px; +} +.dl-horizontal dd:before, +.dl-horizontal dd:after, +.container:before, +.container:after, +.container-fluid:before, +.container-fluid:after, +.row:before, +.row:after, +.form-horizontal .form-group:before, +.form-horizontal .form-group:after, +.btn-toolbar:before, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after, +.panel-body:before, +.panel-body:after, +.modal-footer:before, +.modal-footer:after { + content: " "; + display: table; +} +.dl-horizontal dd:after, +.container:after, +.container-fluid:after, +.row:after, +.form-horizontal .form-group:after, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:after, +.panel-body:after, +.modal-footer:after { + clear: both; +} +[data-icon]:before, +[data-icon-after]:after, +.ico:before { + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-transform: none !important; + font-weight: normal !important; + font-style: normal !important; + font-variant: normal !important; + font-size: 20px !important; + font-family: "safelite-ico" !important; + line-height: 20px !important; +} +html { + position: static !important; + height: auto !important; +} +html, +body { + background-color: #ffffff !important; +} +body { + margin-bottom: 16px !important; +} +.headerlinecontainer { + color: #000000; + font-family: Roboto, Arial, "Helvetica Neue", Helvetica, Tahoma, Verdana, sans-serif; +} +.headerline1 { + display: block; + margin-bottom: 11.5px; + font-weight: 300; + font-size: 20px; + line-height: 30px; +} +.headerline2, +.headerline3, +.headerline4, +.headerline5 { + margin-bottom: 11.5px; + font-size: 16px; +} +.headerline3 { + color: #0c7e47; +} +.headerline5 { + display: block; + padding: 11.5px 0; + color: #167cac; + font-style: italic; +} +.headerline5v2 { + display: block; + padding: 11.5px 0; + color: #da291c; + font-style: italic; + font-size: 12px; +} +.form-group { + margin-bottom: 10px; +} +.form-group .control-label { + display: block; + margin-bottom: 2px; +} +.form-group .form-control { + margin-bottom: 2px; +} +@media (min-width: 500px) { + .form-group { + width: 80%; + } +} +@media (min-width: 800px) { + .form-group { + width: 60%; + } +} +@media (min-width: 576px) { + #cardExpirationContainer .card_expirationMonth, + #cardExpirationContainer .card_expirationYear { + position: relative; + width: 49%; + } + #cardExpirationContainer .card_expirationMonth { + float: left; + } + #cardExpirationContainer .card_expirationYear { + float: right; + } +} +.totalContainer { + margin: 16px 0; + padding: 8px; + border-radius: 5px; + background-color: #0c7e47; + color: #ffffff; + font-size: 16px; +} +.totalContainer em { + font-weight: 500; +} +.totalContainer .strikeThrough { + padding-left: 8px; + text-decoration: line-through; + font-size: 14px; +} +.callerDisplayTextContainer { + margin: 16px 0; + font-style: italic; +} +.disclaimerContainer { + margin: 16px 0; + padding: 8px; + border-radius: 5px; + background-color: #f0f1f2; +} +.disclaimerContainerv2 { + margin: 16px 0; + border-radius: 5px; +} +.buttonContainer #sghopcancelbutton { + float: left; +} +.buttonContainer #sghopsubmitbutton { + float: right; +} +.buttonContainer #sghopsubmitbutton.creditCardSpecific { + float: right; +} +@media (max-width: 500px) { + .buttonContainer #sghopsubmitbutton.creditCardSpecific { + float: left; + width: 100%; + } +} +.buttonContainer #selectPaymentTypeButton { + float: right; +} +@media (max-width: 500px) { + .buttonContainer #selectPaymentTypeButton { + float: left; + width: 100%; + } +} +.globalMessage .message { + padding-left: 0; + line-height: 1.25; +} +.globalMessage .message strong { + color: #da291c; +} +.italicSmall { + font-weight: 300; + font-style: normal; + font-size: 15px; +} +#pageLoadingModal { + background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); +} +#pageLoadingModal .modal-content { + margin-top: 100px; +} +#paypalParentDiv { + margin-bottom: 20px; +} +#creditCardParentDiv { + margin-bottom: 0; +} +.radio .list-group.paymentSelection, +.radio.list-group.paymentSelection { + margin-top: 0; + margin-bottom: 0; +} +@media (max-width: 33.9em) { + .radio .list-group.paymentSelection label, + .radio.list-group.paymentSelection label, + .radio .list-group.paymentSelection a, + .radio.list-group.paymentSelection a { + max-height: 52px; + } +} +#creditCardParentLink { + margin-bottom: 0; +} +@media (max-width: 33.9em) { + #creditCardParentLink { + min-height: 57px; + } +} +#creditCardImages, +#paypalImageSpan { + padding-right: 0; +} +@media (max-width: 33.9em) { + .paymentOptionText { + padding-left: 5px; + } +} +.extraPaddingTop { + padding-top: 20px; +} +.extraPaddingBottom { + padding-bottom: 20px; +} +@media (min-width: 33.9em) { + #paypalImage { + max-width: 22%; + } +} +@media (max-width: 33.9em) { + #paypalImage { + max-width: 55px; + } +} +label.centerme { + position: inherit; + display: table-cell; + width: 9999px !important; + /*This is kind of a hack*/ + vertical-align: middle; +} +input[name="rdioCreditCard"] { + display: block; +} +@media (min-width: 33.9em) { + input[name="rdioCreditCard"] { + margin-top: 10px; + } +} +@media (min-width: 33.9em) { + span.paymentOptionText { + margin-top: 6px; + } +} +.headerline1.safelitehop { + margin-top: 20px; +} +@media (max-width: 499px) { + #buttonContainer { + width: 100%; + } +} +.has-success .control-label { + color: #4d4e53; +} +#thm_fp { + display: block; +} +#paypalParentLink label, +#creditCardParentLink label { + padding-top: 9px; + padding-bottom: 9px; +} +#paypalParentLink label .paymentOptionText, +#creditCardParentLink label .paymentOptionText { + padding-left: 20px; + text-align: left; +} +#paypalParentLink { + margin-top: 12px; +} +html #creditCardParentLink.list-group-item { + border-radius: 48px; + text-align: center; +} +.optional-label span { + display: none; +} +.optional-label::after { + content: " (optional)"; + font-weight: 300; + font-style: normal; + font-size: 15px; +} +.creditCardSpecific { + display: none; +} +@media (max-width: 500px) { + .buy-backdrop.afterpay-checkout-wrapper { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } +} \ No newline at end of file diff --git a/src/constants/application-config.js b/src/constants/application-config.js index 91a56ae10..b5233d170 100644 --- a/src/constants/application-config.js +++ b/src/constants/application-config.js @@ -21,6 +21,10 @@ const applicationConfig = { "//" + location.host + "/fmg/?fmgPage=payment-method&src=concept-funnel", + GOOGLE_CALENDAR: "https://www.google.com/calendar/render?action=TEMPLATE", + YAHOO_CALENDAR: "https://calendar.yahoo.com/?v=60", + OUTLOOK_CALENDAR: + "https://outlook.office.com/calendar/deeplink/compose?path=/calendar/action/compose&rru=addevent", }; export { applicationConfig }; diff --git a/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue index 337995aba..11ee74e32 100644 --- a/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue +++ b/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue @@ -41,18 +41,18 @@ export default { isDisplayed() { return this.showAddRainDefense || this.showAddWipers; }, - // showAddRainDefense() { - // // if not found in the cart - // return !this.cartItems.some((vap) => { - // return vap.partType === "RAIN DEFENSE"; - // }); - // }, - // showAddWipers() { - // // if not found in the cart - // return !this.cartItems.some((vap) => { - // return vap.partType.includes(" WIPER"); - // }); - // }, + showAddRainDefense() { + // if not found in the cart + return !this.cartItems.some((vap) => { + return vap?.partType === "RAIN DEFENSE"; + }); + }, + showAddWipers() { + // if not found in the cart + return !this.cartItems.some((vap) => { + return vap?.partType?.includes(" WIPER"); + }); + }, rainDefensePrice() { // const lineItem = this.rainDefenseItem; const lineItem = this.availableLineItems.find((item) => { diff --git a/src/fmg-components/content-group-modal/content-group-modal.vue b/src/fmg-components/content-group-modal/content-group-modal.vue index d9d9da937..a64d10fa3 100644 --- a/src/fmg-components/content-group-modal/content-group-modal.vue +++ b/src/fmg-components/content-group-modal/content-group-modal.vue @@ -12,6 +12,7 @@ class="my-4 caption modal-sub-body" v-if="ModalSubBodyText" v-html="ModalSubBodyText">

+ @@ -22,6 +23,10 @@ export default { name: "content-group-modal", props: { cmsWidgetName: String, + footerButtonActionName: { + type: String, + default: null, + }, }, computed: { ModalName() { @@ -50,10 +55,16 @@ export default { openModal() { this.$refs[this.ModalName].openModal(); }, - - footerButtonClick() { + closeModal() { this.$refs[this.ModalName].closeModal(); }, + footerButtonClick() { + if (this.footerButtonActionName) { + this.$emit(this.footerButtonActionName, this.ModalName); + } else { + this.closeModal(); + } + }, }, components: { modal, diff --git a/src/layouts/add-to-calendar/add-to-calendar.spec.js b/src/layouts/add-to-calendar/add-to-calendar.spec.js deleted file mode 100644 index 645e3b12f..000000000 --- a/src/layouts/add-to-calendar/add-to-calendar.spec.js +++ /dev/null @@ -1,244 +0,0 @@ -// Components -import addToCalendar from "@/layouts/add-to-calendar/add-to-calendar.vue"; -import { calendarOptions } from "@/constants/calendar-options"; -import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants"; - -// Supporting Files -import { shallowMount } from "@vue/test-utils"; -import { getMountOptions } from "@/helpers/unit-test-helper.js"; -import store from "@/store"; - -beforeEach(() => { - jest.restoreAllMocks(); - jest.clearAllMocks(); - store.getters = { - order: { - schedule: { - date: "2019-01-01", - startTime: "09:00", - endTime: "10:00", - routeCode: "000", - }, - lineItems: { - glassParts: [ - { - partNumber: "ABC123", - }, - ], - supportingItems: [], - }, - serviceLocation: { - address: "", - address2: null, - city: "", - state: "AZ", - appointmentType: "Inshop", - zipCode: "12345", - zipCodeCtu: "01234", - provider: { - providerNumber: "123", - address: { - streetAddress: "test1", - city: "test", - state: "AZ", - zipCode: "12345", - zipCodeCtu: "01234", - }, - }, - }, - damage: { - isRepair: false, - }, - referralNumber: "1234567", - }, - payment: { - isInsurance: true, - }, - lineItems: { - glassParts: [], - supportingItems: [], - }, - }; -}); -afterEach(() => { - store.getters = {}; - jest.restoreAllMocks(); - jest.clearAllMocks(); -}); - -describe("Add-to-calendar methods...", () => { - test("Add-to-calendar should trigger openModal method", () => { - //Arrange - const { wrapper } = setupMocks({}); - - //Act - wrapper.vm.openCalendarModal(); - - //Assert - expect(wrapper.vm.$refs.calendarModalQuestion.openModal).toBeCalled(); - }); - test("serviceType should return 'replacement and recalibration' when isRepair is false and funnelHasRecalibrationPart true.", () => { - //Arrange - store.getters.order.damage.isRepair = false; - store.getters.funnelHasRecalibrationPart = true; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.serviceType(); - - //Assert - expect(testValue).toEqual("replacement and recalibration"); - }); - test("serviceType should return 'replacement' when isRepair is false and funnelHasRecalibrationPart is false.", () => { - //Arrange - store.getters.order.damage.isRepair = false; - store.getters.funnelHasRecalibrationPart = false; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.serviceType(); - - //Assert - expect(testValue).toEqual("replacement"); - }); - test("serviceType should return 'repair' when isRepair is true.", () => { - //Arrange - store.getters.order.damage.isRepair = true; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.serviceType(); - - //Assert - expect(testValue).toEqual("repair"); - }); - test("getCalendarData should return expected model value.", () => { - //Arrange - const type = calendarOptions.OUTLOOKCOM; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getCalendarData(type); - - //Assert - expect(testValue.name).toEqual(calendarOptions.OUTLOOKCOM); - }); - test("getappointmentData should return expected model value for appointmentType mobile.", () => { - //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; - store.getters.order.damage.isRepair = false; - store.getters.funnelHasRecalibrationPart = true; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getappointmentData(); - - //Assert - expect(testValue.Subject).toEqual("Safelite replacement and recalibration appointment"); - }); - test("getappointmentData should return expected model value for appointmentType DROP_OFF and OVERNIGHT_DROP_OFF.", () => { - //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; - store.getters.order.schedule.routeCode = RouteCodeFlags.OVERNIGHT_DROP_OFF; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getappointmentData(); - - //Assert - expect(testValue.Subject).toEqual("Drop off your vehicle by 5:30 PM"); - }); - test("getappointmentData should return expected model value for appointmentType DROP_OFF and ALL_DAY_DROP_OFF and isSameDayDropOff.", () => { - //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; - store.getters.order.schedule.routeCode = RouteCodeFlags.ALL_DAY_DROP_OFF; - store.getters.order.schedule.date = new Date().toISOString().split("T")[0]; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getappointmentData(); - - //Assert - expect(testValue.Subject).toEqual("Drop off your vehicle in the next 30 - 60 minutes"); - }); - test("getappointmentData should return expected model value for appointmentType DROP_OFF and ALL_DAY_DROP_OFF.", () => { - //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; - store.getters.order.schedule.routeCode = RouteCodeFlags.ALL_DAY_DROP_OFF; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getappointmentData(); - - //Assert - expect(testValue.Subject).toEqual("Drop off your vehicle between 9:00 AM - 11:00 AM"); - }); - test("getappointmentData should return expected model value for appointmentType DROP_OFF.", () => { - //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; - store.getters.order.damage.isRepair = true; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getappointmentData(); - - //Assert - expect(testValue.Subject).toEqual("Safelite repair appointment"); - }); - test("getappointmentData should return expected model value for appointmentType IN_SHOP.", () => { - //Arrange - store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; - store.getters.order.damage.isRepair = true; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.getappointmentData(); - - //Assert - expect(testValue.Subject).toEqual("Safelite repair appointment"); - }); - test("isSameDayDropOff should return true for current schedule date.", () => { - //Arrange - store.getters.order.schedule.date = new Date().toISOString().split("T")[0]; - const { wrapper } = setupMocks({}); - - //Act - const testValue = wrapper.vm.isSameDayDropOff(); - - //Assert - expect(testValue).toEqual(true); - }); - test("setCalendarAppointment should call getAppointment method for iCAL and Outlook.", () => { - //Arrange - const newValue = { name: calendarOptions.OUTLOOK }; - const { wrapper } = setupMocks({}); - wrapper.vm.getAppointment = jest.fn(); - //Act - wrapper.vm.setCalendarAppointment(newValue); - - //Assert - expect(wrapper.vm.getAppointment).toHaveBeenCalled(); - }); - test("setCalendarAppointment should call window.open for Google, yahoo and Outlook.com.", () => { - //Arrange - const newValue = { name: calendarOptions.GOOGLE }; - const { wrapper } = setupMocks({}); - window.open = jest.fn(); - - //Act - wrapper.vm.setCalendarAppointment(newValue); - - //Assert - expect(window.open).toHaveBeenCalledTimes(1); - }); -}); - -function setupMocks({ customMountOptions }) { - const mountOptions = getMountOptions({ - ...customMountOptions, - }); - - const wrapper = shallowMount(addToCalendar, mountOptions); - wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn(); - return { wrapper }; -} diff --git a/src/layouts/add-to-calendar/add-to-calendar.vue b/src/layouts/add-to-calendar/add-to-calendar.vue deleted file mode 100644 index 3f32a525b..000000000 --- a/src/layouts/add-to-calendar/add-to-calendar.vue +++ /dev/null @@ -1,301 +0,0 @@ - - - diff --git a/src/layouts/confirmation/add-to-calendar/add-to-calendar.spec.js b/src/layouts/confirmation/add-to-calendar/add-to-calendar.spec.js new file mode 100644 index 000000000..c55b170cd --- /dev/null +++ b/src/layouts/confirmation/add-to-calendar/add-to-calendar.spec.js @@ -0,0 +1,196 @@ +// Components +import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar.vue"; +import { calendarOptions } from "@/constants/calendar-options"; +import { AppointmentTypeStrings, RouteCodeFlags } from "@/constants/schedule-constants"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import store from "@/store"; + +beforeEach(() => { + jest.restoreAllMocks(); + jest.clearAllMocks(); + store.getters = { + order: { + schedule: { + date: "2019-01-01", + startTime: "09:00", + endTime: "10:00", + routeCode: "000", + }, + lineItems: { + glassParts: [ + { + partNumber: "ABC123", + }, + ], + supportingItems: [], + }, + serviceLocation: { + address: "", + address2: null, + city: "", + state: "AZ", + appointmentType: "Inshop", + zipCode: "12345", + zipCodeCtu: "01234", + provider: { + providerNumber: "123", + address: { + streetAddress: "test1", + city: "test", + state: "AZ", + zipCode: "12345", + zipCodeCtu: "01234", + }, + }, + }, + damage: { + isRepair: false, + }, + referralNumber: "1234567", + }, + payment: { + isInsurance: true, + }, + lineItems: { + glassParts: [], + supportingItems: [], + }, + }; +}); +afterEach(() => { + store.getters = {}; + jest.restoreAllMocks(); + jest.clearAllMocks(); +}); + +describe("Add-to-calendar methods...", () => { + test("Add-to-calendar should trigger openModal method", () => { + //Arrange + + const { wrapper } = setupMocks({ + 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); + }); +}); + +var appointmentText = "Appointment content"; +function setupMocks({ customMountOptions }) { + const mountOptions = getMountOptions({ + ...customMountOptions, + }); + mountOptions.mixins = [ + { + methods: { + getCmsContent: jest.fn().mockImplementation(() => { + return appointmentText; + }), + }, + }, + ]; + const wrapper = shallowMount(addToCalendar, mountOptions); + wrapper.vm.$refs.calendarModalQuestion.openModal = jest.fn(); + return { wrapper }; +} diff --git a/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue new file mode 100644 index 000000000..24427b2d5 --- /dev/null +++ b/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue @@ -0,0 +1,314 @@ + + + diff --git a/src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue similarity index 100% rename from src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue rename to src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue diff --git a/src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js b/src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js similarity index 92% rename from src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js rename to src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js index d28c2442f..2f0a51a33 100644 --- a/src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js +++ b/src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.spec.js @@ -1,6 +1,6 @@ import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; -import calendarModalQuestion from "@/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.vue"; +import calendarModalQuestion from "@/layouts/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 () => { diff --git a/src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.vue b/src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue similarity index 100% rename from src/layouts/add-to-calendar/calendar-modal-question/calendar-modal-question.vue rename to src/layouts/confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue diff --git a/src/layouts/confirmation/confirmation.spec.js b/src/layouts/confirmation/confirmation.spec.js index eb77afcb1..4bef5f8a3 100644 --- a/src/layouts/confirmation/confirmation.spec.js +++ b/src/layouts/confirmation/confirmation.spec.js @@ -115,16 +115,16 @@ describe("confirmation.vue", () => { }); }); describe("computed properties...", () => { - // test("ScheduleDateFormatted should return date in expected format.", () => { - // //Arrange - // const { wrapper } = setupMocks({}); + test("ScheduleDateFormatted should return date in expected format.", () => { + //Arrange + const { wrapper } = setupMocks({}); - // // Act - // const testValue = wrapper.vm.ScheduleDateFormatted; + // Act + const testValue = wrapper.vm.ScheduleDateFormatted; - // // Assert - // expect(testValue).toEqual("Sunday, January 1"); - // }); + // Assert + expect(testValue).toEqual("Sunday, January 1"); + }); test("ScheduleTimeFormatted should return mobile time in expected format.", () => { //Arrange store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index f0af10529..5adcc5613 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -10,10 +10,6 @@ -
-
-

{{ this.ScheduleDateFormatted }}

-

{{ this.ScheduleTimeFormatted }}

+

{{ ScheduleDateFormatted }}

+

{{ ScheduleTimeFormatted }}

- + -
+
-
+
"); + ?.replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT) + ?.replaceAll("<", "<") + ?.replaceAll(">", ">"); }, ScheduleDate() { return store.getters.order.schedule.date; @@ -143,17 +150,17 @@ export default { }, AppointmentWordingText() { if (this.AppointmentType == AppointmentTypeStrings.MOBILE) { - return this.MobileWordingText.replaceAll( + return this.MobileWordingText?.replaceAll( "{custom:ADDRESS}", this.ServiceLocationFullAddress ); } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) { - return this.DropOffWordingText.replaceAll( + return this.DropOffWordingText?.replaceAll( "{custom:ADDRESS}", this.ProviderFullAddress ); } else { - return this.InShopWordingText.replaceAll( + return this.InShopWordingText?.replaceAll( "{custom:ADDRESS}", this.ProviderFullAddress ); @@ -191,11 +198,6 @@ export default { } }, }, - data() { - return { - workOrderNumber: store.getters.order.workOrderNumber, - }; - }, methods: { arePagePrerequisitesValid() { // Service Location diff --git a/src/fmg-components/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue similarity index 100% rename from src/fmg-components/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue rename to src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue diff --git a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue new file mode 100644 index 000000000..3fc426d63 --- /dev/null +++ b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue @@ -0,0 +1,164 @@ + + + diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 2bc00ba76..a8e422e41 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -27,7 +27,7 @@ @@ -42,12 +42,10 @@ + vapsTilesCmsName="VapsProductTiles" /> - { @@ -311,7 +300,6 @@ export default { ); } }, - async piaSetup(payNowType) { this.$refs.loadingModal.showModal(); @@ -389,7 +377,6 @@ export default { cart, alert, addVapsModalButtons, - contentGroupModal, paymentMethodQuestion, }, }; diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index 81c298d11..d6a6394fe 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -56,7 +56,7 @@ - + @@ -229,7 +229,11 @@ export default { computed: { dynamicCSSUrl() { const { protocol, hostname, port } = window.location; - return `${protocol}//${hostname}:${port}/css/site-2020Styling.css`; + return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`; + }, + dynamicHopCSSUrl() { + const { protocol, hostname, port } = window.location; + return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`; }, }, methods: { diff --git a/src/layouts/vehicle/vehicle.spec.js b/src/layouts/vehicle/vehicle.spec.js index 56b46292d..74d29071a 100644 --- a/src/layouts/vehicle/vehicle.spec.js +++ b/src/layouts/vehicle/vehicle.spec.js @@ -5,12 +5,19 @@ import vehicle from "@/layouts/vehicle/vehicle.vue"; import { shallowMount } from "@vue/test-utils"; import { nextTick } from "vue"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import baseMixin from "../../mixins/base-mixin"; // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ settleAllPromises: jest.fn(), })); +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + describe("vehicle.vue", () => { test("arePagePrerequisitesValid should be true ", async () => { //Arrange @@ -40,17 +47,24 @@ describe("vehicle.vue", () => { }); function setupMocks() { - const wrapper = shallowMount( - vehicle, - getMountOptions({ - router: { - navigate: jest.fn(), - navigate: jest.fn(), - navigateWithSaving: jest.fn(), - navigateWithoutSaving: jest.fn(), - }, - }) - ); + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn(), + navigate: jest.fn(), + navigateWithSaving: jest.fn(), + navigateWithoutSaving: jest.fn(), + }, + }); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + + mountOptions.mixins = [mockMixin]; + const wrapper = shallowMount(vehicle, mountOptions); return { wrapper }; } diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue index e064250bd..1754a3a91 100644 --- a/src/layouts/vehicle/vehicle.vue +++ b/src/layouts/vehicle/vehicle.vue @@ -9,6 +9,10 @@
+
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 951f1c0ec..ce4e6b60f 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -1,6 +1,6 @@