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: {