From 56422e5459cceda119e0e9e25df05aac326117bd Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 19 Feb 2026 16:14:40 -0500 Subject: [PATCH 01/14] modal updates WIP --- src/digital-components/modal/modal.vue | 46 ++++++------------- .../content-group-modal.vue | 2 +- 2 files changed, 16 insertions(+), 32 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index d4be7797..1f410236 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -13,14 +13,13 @@ }">
- - + Date: Thu, 26 Feb 2026 13:46:21 -0500 Subject: [PATCH 09/14] ADAS recal modal --- .../coverage-statement/coverage-statement.vue | 9 +--- .../recal-modal/recal-modal.vue | 51 +++++++++++++++---- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 3cc519bf..a79c11fa 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -10,7 +10,7 @@ cmsWidgetName="SiteHeaderWidget" />
-
-
+ ref="recalModal" + :footerButtonText="modalCloseButtonText" + @footerButtonEvent="footerButtonClick">
@@ -9,7 +11,7 @@ :src="modalImage" class="mw-100 d-flex" alt="" /> -
+
@@ -34,15 +36,18 @@ export default { }, modalImage() { return this.getCmsContent('RecalModal', 'Image'); + }, + modalCloseButtonText() { + return this.getCmsContent('RecalModal', 'FooterText'); } }, methods: { - // openModal() { - // this.$refs['RecalModal'].openModal(); - // }, - // closeModal() { - // this.$refs['RecalModal'].closeModal(); - // }, + openModal() { + this.$refs.recalModal.openModal(); + }, + footerButtonClick() { + this.$refs.recalModal.closeModal(); + }, } }; @@ -50,8 +55,34 @@ export default { From ae76220e847a99b012891dba87612a011fa3092e Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 26 Feb 2026 14:15:33 -0500 Subject: [PATCH 10/14] update --- src/layouts/coverage-statement/recal-modal/recal-modal.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue index d7b82c09..6419ff33 100644 --- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue +++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue @@ -39,6 +39,9 @@ export default { }, modalCloseButtonText() { return this.getCmsContent('RecalModal', 'FooterText'); + }, + vehicleMake() { + return this.mainStore.order.vehicle.make.toUpperCase(); } }, methods: { From 2f8650174d2ab216851ead5b55046b5818453510 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 26 Feb 2026 14:47:14 -0500 Subject: [PATCH 11/14] updates/remove unneeded code --- .../recal-modal/recal-modal.vue | 2 +- .../provider-preference.vue | 21 ++++++------------- 2 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/layouts/coverage-statement/recal-modal/recal-modal.vue index 6419ff33..0edfcdae 100644 --- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue +++ b/src/layouts/coverage-statement/recal-modal/recal-modal.vue @@ -26,7 +26,7 @@ export default { }, computed: { modalBodyText() { - return this.getCmsContent('RecalModal', 'BodyText'); + return this.getCmsContent('RecalModal', 'BodyText').replaceAll('{custom:vehicleMake}', this.vehicleMake); }, modalHeaderText() { return this.getCmsContent('RecalModal', 'HeaderText'); diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index 27e38ff8..21a6bc20 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -58,11 +58,11 @@ // Import Supporting Files import { fetchCmsContentForPage, + processIfStatements, setupModalLinks } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; import errorMessages from '@/constants/error-messages'; -import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import showIssLoadingModal from '@/helpers/loading-modal-helper'; import bailoutMessage from '@/constants/bailoutMessage'; import baseFormMixin from '@/mixins/base-form-mixin'; @@ -133,26 +133,14 @@ export default { return this.getCmsContent('ScheduleWithSafeliteText', 'BodyText'); }, scheduleWithOtherText() { - return this.getCmsContent('ScheduleWithOtherText', 'BodyText'); + const text = this.getCmsContent('ScheduleWithOtherText', 'BodyText'); + return processIfStatements(text, 'custom', this.getStateSpecificText); } }, mounted() { setupModalLinks(this); }, methods: { - getHeaderTextFromCms(cmsWidgetName) { - const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText'); - return headerText?.replace( - '{custom:SafeliteLogo}', - "" - ); - }, - getSubheaderTextFromCms(cmsWidgetName) { - return this.getCmsContent(cmsWidgetName, 'SubheaderText'); - }, - getBodyTextFromCms(cmsWidgetName) { - return this.getCmsContent(cmsWidgetName, 'BodyText'); - }, arePagePrerequisiteValid() { return true; }, @@ -191,6 +179,9 @@ export default { }, openStateSteeringModal() { this.$refs[STEERING_MODAL_REF_NAME].openModal(); + }, + getStateSpecificText(value) { + return this.mainStore.order.customer.address.state?.toLowerCase() === value?.toLowerCase(); } } }; From 216815c853d04c00c4477bd65b9c55bfebb088d8 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Thu, 26 Feb 2026 15:33:00 -0500 Subject: [PATCH 12/14] move recal modal to iss components --- .../recal-modal/recal-modal.vue | 1 + src/layouts/coverage-statement/coverage-statement.vue | 2 +- .../provider-preference/provider-preference.spec.js | 5 +++-- .../service-location/service-location.spec.js | 2 +- .../schedule-page/service-location/service-location.vue | 9 ++++----- 5 files changed, 10 insertions(+), 9 deletions(-) rename src/{layouts/coverage-statement => iss-components}/recal-modal/recal-modal.vue (98%) diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.vue b/src/iss-components/recal-modal/recal-modal.vue similarity index 98% rename from src/layouts/coverage-statement/recal-modal/recal-modal.vue rename to src/iss-components/recal-modal/recal-modal.vue index 0edfcdae..fc5df201 100644 --- a/src/layouts/coverage-statement/recal-modal/recal-modal.vue +++ b/src/iss-components/recal-modal/recal-modal.vue @@ -84,6 +84,7 @@ export default { p { strong { font-weight: 600; + color: $black; } } } diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index a79c11fa..4e31fa37 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -121,7 +121,7 @@ import textLink from '@/ux-components/text-link/text-link.vue'; import buttonMain from '@/ux-components/button-main/button-main.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import afterpayModalBanner from '@/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue'; -import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue'; +import recalModal from '@/iss-components/recal-modal/recal-modal.vue'; // Import Supporting Files import { diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js index 0d93ed3a..d00c9183 100644 --- a/src/layouts/provider-preference/provider-preference.spec.js +++ b/src/layouts/provider-preference/provider-preference.spec.js @@ -2,7 +2,7 @@ import ProviderPreference from '@/layouts/provider-preference/provider-preferenc import { shallowMount } from '@vue/test-utils'; import settleAllPromises from '@/helpers/layout-helper.js'; -import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; +import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; import navigationScenarios from '@/router/router-constants/navigation-scenarios'; @@ -13,7 +13,8 @@ jest.mock('@/helpers/layout-helper.js', () => jest.fn()); // Mock fetchCmsContentForPage jest.mock('@/helpers/cms-content-helper', () => ({ fetchCmsContentForPage: jest.fn(), - setupModalLinks: jest.fn() + setupModalLinks: jest.fn(), + processIfStatements: jest.fn() })); /** @ignore */ diff --git a/src/layouts/schedule-page/service-location/service-location.spec.js b/src/layouts/schedule-page/service-location/service-location.spec.js index 6a50fe05..cda30da8 100644 --- a/src/layouts/schedule-page/service-location/service-location.spec.js +++ b/src/layouts/schedule-page/service-location/service-location.spec.js @@ -124,7 +124,7 @@ const mountOptions = { alert: true, textBlock: true, appointmentTypeQuestion: true, - contentGroupModal: true, + recalModal: true, siteFooter: true, siteHeader: true, siteSubHeader: true, diff --git a/src/layouts/schedule-page/service-location/service-location.vue b/src/layouts/schedule-page/service-location/service-location.vue index 601a1e5d..cbce93d2 100644 --- a/src/layouts/schedule-page/service-location/service-location.vue +++ b/src/layouts/schedule-page/service-location/service-location.vue @@ -117,9 +117,8 @@ cmsWidgetName="MobileFeeDisclaimerWidget" typeStyle="disclaimer" />
-
@@ -140,10 +139,10 @@ import alert from '@/ux-components/alert/alert.vue'; import textBlock from '@/digital-components/text-block/text-block.vue'; import appointmentTypeQuestion from '@/layouts/schedule-page/service-location/appointment-type-question/appointment-type-question.vue'; import baseFormMixin from '@/mixins/base-form-mixin'; -import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue'; import shopAddress from '@/layouts/schedule-page/service-location/shop-address/shop-address.vue'; import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue'; import widgetFields from '@/constants/cms-widget-fields'; +import recalModal from '@/iss-components/recal-modal/recal-modal.vue'; const RECAL_MODAL_REF_NAME = 'RecalModal'; @@ -153,9 +152,9 @@ export default { alert, textBlock, appointmentTypeQuestion, - contentGroupModal, shopAddress, - serviceZipQuestion + serviceZipQuestion, + recalModal }, mixins: [baseFormMixin], emits: ['appointment-type-changed', 'city-updated', 'clear-mobile-data', 'in-shop-zip-updated', 'mobile-zip-updated', 'provider-changed'], From 2c810282fda7e926471f96b154215d60f27341c4 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Fri, 27 Feb 2026 11:57:18 -0500 Subject: [PATCH 13/14] copilot fixes --- src/digital-components/modal/modal.vue | 3 ++- src/iss-components/recal-modal/recal-modal.vue | 16 +++++++++++----- .../cancel-claim-modal/cancel-claim-modal.vue | 2 +- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 6ad8bb08..83e07ccb 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -45,6 +45,7 @@ class="w-100" :buttonText="footerButtonText" pushToGA + :variant="buttonVariant" :class="[ (isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid' @@ -55,7 +56,7 @@ class="mt-4 mb-0" linkType="text" text="Close window" - href="#" + href="#!" @click="closeModal" /> diff --git a/src/iss-components/recal-modal/recal-modal.vue b/src/iss-components/recal-modal/recal-modal.vue index fc5df201..c6638b14 100644 --- a/src/iss-components/recal-modal/recal-modal.vue +++ b/src/iss-components/recal-modal/recal-modal.vue @@ -24,21 +24,27 @@ export default { components: { modal }, + props: { + cmsWidgetName: { + type: String, + default: 'RecalModal' + } + }, computed: { modalBodyText() { - return this.getCmsContent('RecalModal', 'BodyText').replaceAll('{custom:vehicleMake}', this.vehicleMake); + return this.getCmsContent(this.cmsWidgetName, 'BodyText').replaceAll('{custom:vehicleMake}', this.vehicleMake); }, modalHeaderText() { - return this.getCmsContent('RecalModal', 'HeaderText'); + return this.getCmsContent(this.cmsWidgetName, 'HeaderText'); }, modalFooterText() { - return this.getCmsContent('RecalModal', 'FooterText'); + return this.getCmsContent(this.cmsWidgetName, 'FooterText'); }, modalImage() { - return this.getCmsContent('RecalModal', 'Image'); + return this.getCmsContent(this.cmsWidgetName, 'Image'); }, modalCloseButtonText() { - return this.getCmsContent('RecalModal', 'FooterText'); + return this.getCmsContent(this.cmsWidgetName, 'FooterText'); }, vehicleMake() { return this.mainStore.order.vehicle.make.toUpperCase(); diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue index 57bae07e..5aa96972 100644 --- a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue +++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue @@ -21,7 +21,7 @@ class="cancel-link" linkType="text" text="No, I want to cancel" - href="#" + href="#!" @clickEvent="cancelClaimConfirmation"> From bf93a57dce8efd86ef846bf7144e58b347216b47 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Fri, 27 Feb 2026 11:58:00 -0500 Subject: [PATCH 14/14] missed one --- src/iss-components/recal-modal/recal-modal.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/iss-components/recal-modal/recal-modal.vue b/src/iss-components/recal-modal/recal-modal.vue index c6638b14..311c4f82 100644 --- a/src/iss-components/recal-modal/recal-modal.vue +++ b/src/iss-components/recal-modal/recal-modal.vue @@ -37,9 +37,6 @@ export default { modalHeaderText() { return this.getCmsContent(this.cmsWidgetName, 'HeaderText'); }, - modalFooterText() { - return this.getCmsContent(this.cmsWidgetName, 'FooterText'); - }, modalImage() { return this.getCmsContent(this.cmsWidgetName, 'Image'); },