diff --git a/src/constants/experiments.js b/src/constants/experiments.js index 696707827..8209cae9c 100644 --- a/src/constants/experiments.js +++ b/src/constants/experiments.js @@ -19,6 +19,7 @@ const experimentSettings = { INSURANCE_TAB_TO_DISPLAY_THRESHOLD_EXTERNAL: "NextGen_ExternalInsuranceTabDisplayThreshold", DISPLAY_MSR: "DisplayMSR", PRICING_BY_DAY: "DisplayPricingByDay", + FOSTER_LOVE: "DisplayFosterLove", }; const experimentTriggers = { diff --git a/src/experiment-components/donation-block.vue b/src/experiment-components/donation-block.vue index 211cc3e28..10ebec7a5 100644 --- a/src/experiment-components/donation-block.vue +++ b/src/experiment-components/donation-block.vue @@ -20,7 +20,9 @@ target="_blank" /> -
+
@@ -31,9 +33,17 @@ :value="donationValues[0]" checked /> - + - +
diff --git a/src/experiment-components/service-package-radio.vue b/src/experiment-components/service-package-radio.vue index 4aae00bc0..3b9e5d9c9 100644 --- a/src/experiment-components/service-package-radio.vue +++ b/src/experiment-components/service-package-radio.vue @@ -201,19 +201,44 @@ export default { If this experiment wins, move this to package-label ::before/::after below */ &:before { - top: 15px; + top: 0.9375rem; } &:after { - top: 30px; + top: 1.875rem; + } + @include media-breakpoint-up(lg) { + &:before { + top: .5rem; + } + &:after { + top: 1.4375rem; + } + p { + span { + align-self: center; + } + } } } + .package-label.pricing-by-day-pkg-lbl-ins { &:before { - top: 5px; + top: .3125rem; } &:after { - top: 20px; + top: 1.25rem; + } + } + + + .package-label.pricing-by-day-pkg-lbl { + &:before { + top: 0.9375rem; + @include media-breakpoint-up(lg) { + top: .3125rem; + } + } + &:after { + top: 1.25rem; } } @@ -350,7 +375,8 @@ export default { &.pricing-info-pricing-by-day { text-align: end; color: $green; - font-size: 0.875rem; + font-size: 1rem; + line-height: 1; span.strikethrough-price { text-decoration: line-through; font-size: 0.75rem; @@ -376,6 +402,7 @@ export default { justify-content: flex-end; align-items: center; align-self: flex-start; + line-height: 1; div.strikethrough-discount-price { display: inline; text-decoration: line-through; @@ -392,8 +419,12 @@ export default { div.discount-price { color: $green; display: inline; + font-size: 1rem; } } + .caption { + font-size: 0.625rem; + } } ul { margin: 1rem 0 0 -5px; diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue index 6d77afc44..3628a372c 100644 --- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue +++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue @@ -151,6 +151,7 @@ export default { &.btn { &.btn-secondary { + font-weight: 900; border: none; &:hover, &:active, @@ -180,6 +181,7 @@ export default { transition: background 0s 0s ease-in-out; } } + .modal.modal-component .modal-dialog .modal-content { .modal-header { padding-top: 0; diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue index b839ae1ad..c87da58dd 100644 --- a/src/layouts/confirmation/confirmation.vue +++ b/src/layouts/confirmation/confirmation.vue @@ -64,7 +64,7 @@ :isItac="isItac" :isNoComp="isNoComp" /> -
+
{ return mockGetShopProviderData(mockServiceZipCode); }), + getZipCodeData: jest.fn().mockImplementation(() => { + return Promise.resolve({ + containsMilitaryBase: false, + isServiceable: true, + isValid: true, + state: "testState", + zipCodeCtu: "testCTU", + }); + }), }) ); @@ -424,6 +433,7 @@ describe("service-location.vue", () => { }, selectedAppointmentType: "Mobile", providerData: { mobileProviderNumber: "01820" }, + isGlassServiceableMobile: true, }); const mobileLocationQuestionsComponent = wrapper.findComponent({ @@ -459,6 +469,7 @@ describe("service-location.vue", () => { isVehicleProtected: true, }; + wrapper.vm.closeModalAction = jest.fn(); // Act // Trigger the event @@ -483,6 +494,7 @@ describe("service-location.vue", () => { }, selectedAppointmentType: "Mobile", providerData: { mobileProviderNumber: "01820" }, + isGlassServiceableMobile: true, }); const mobileLocationQuestionsComponent = wrapper.findComponent({ @@ -532,6 +544,7 @@ describe("service-location.vue", () => { zipCodeCtu: "01526", }; + wrapper.vm.closeModalAction = jest.fn(); // Act // Trigger the event @@ -563,6 +576,7 @@ describe("service-location.vue", () => { }); mobileLocationQuestionsComponent.resetComponent = jest.fn(); wrapper.vm.forwardButtonAction = jest.fn(); + wrapper.vm.isServiceableMobile = true; const serviceZipCodeComponent = wrapper.findComponent({ ref: "serviceZipCodeQuestion", @@ -580,6 +594,7 @@ describe("service-location.vue", () => { isVehicleProtected: "YesAnswer", }; + wrapper.vm.closeModalAction = jest.fn(); // Act mobileLocationQuestionsComponent.vm.$emit( "setMobileLocationAndProceed", diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 698b75a40..7b89b847d 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -149,6 +149,7 @@ import { getPricedMobileFeePart, getServiceabilityDetails, getShopProviderData, + getZipCodeData, } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { applicationConfig } from "@/constants/application-config"; @@ -206,10 +207,7 @@ export default { const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const serviceZipCode = store.getters.order.serviceLocation.zipCode; - const zipCodeDataPromise = baseMixin.methods.getZipCodeData( - serviceZipCode, - "service-location" - ); + const zipCodeDataPromise = getZipCodeData(serviceZipCode); const serviceabilityDetailsPromise = getServiceabilityDetails( serviceZipCode, @@ -475,17 +473,31 @@ export default { }, //creating async function as the computed property can not directly handle asynchronous operations or promises. async setMobileLocationQuestions(newValue) { - if (newValue.addressQuestions.zipCode !== this.zipCode) { - await getShopProviderData(newValue.addressQuestions.zipCode).then((result) => { - this.shopProviderData = result.data; - this.selectedProvider = new Provider( - this.shopProviderData.mobileProviderNumber - ); + var newZipCode = newValue.addressQuestions.zipCode; + if (newZipCode !== this.zipCode) { + await getShopProviderData(newZipCode).then((result) => { + if (this.isServiceableMobile) { + this.shopProviderData = result.data; + this.selectedProvider = new Provider( + this.shopProviderData.mobileProviderNumber + ); + } + }); + } + if (this.isServiceableMobile) { + this.setMobileLocation(newValue); + //proceed to next page + this.forwardButtonAction(); + } else { + this.closeModalAction("mobileLocationQuestions"); + await getZipCodeData(newZipCode).then((zipCodeData) => { + this.serviceZipCodeQuestion = { + state: zipCodeData.state, + zipCode: newZipCode, + zipCodeCtu: zipCodeData.zipCodeCtu, + }; }); } - this.setMobileLocation(newValue); - //proceed to next page - this.forwardButtonAction(); }, getServiceAddressFromStore() { return store.getters.order.serviceLocation.address; @@ -669,6 +681,9 @@ export default { openModalAction(modalName) { this.$refs[modalName].openModal(); }, + closeModalAction(modalName) { + this.$refs[modalName].closeModal(); + }, }, watch: { zipCode: {