diff --git a/src/layouts/vehicle/vehicle.spec.js b/src/layouts/vehicle/vehicle.spec.js
index 74d29071a..c61fd5849 100644
--- a/src/layouts/vehicle/vehicle.spec.js
+++ b/src/layouts/vehicle/vehicle.spec.js
@@ -30,6 +30,18 @@ describe("vehicle.vue", () => {
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
+ test("if the vehicle is not serviceable displays the displayNoServiceAlert", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({
+ canSafeliteService: false,
+ });
+
+ //Act
+ await wrapper.vm.getCanSafeliteService();
+
+ //Assert
+ expect(wrapper.findComponent({ ref: "AlertNoService" }).isVisible()).toBe(true);
+ });
});
describe("vehicle.vue", () => {
describe("navigation", () => {
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 1292983f1..6b7d6f052 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -56,11 +56,20 @@
:displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
class="mt-5 vehicle-footer"
ref="banner" />
+
@@ -74,6 +83,7 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import alert from "@/ux-components/alert/alert";
import vehicleQuestion from "@/layouts/vehicle/vehicle-question/vehicle-question";
// Supporting files
@@ -111,6 +121,7 @@ export default {
makeOptions: [],
modelOptions: [],
styleOptions: [],
+ displayNoServiceAlert: false,
};
},
@@ -225,6 +236,7 @@ export default {
watch: {
async selectedYear(year) {
+ this.resetAlert();
this.makeOptions = [];
this.selectedMake = null;
this.selectedModel = null;
@@ -244,6 +256,7 @@ export default {
}
},
async selectedMake(make) {
+ this.resetAlert();
this.modelOptions = [];
this.selectedModel = null;
this.selectedStyle = null;
@@ -262,6 +275,7 @@ export default {
}
},
async selectedModel(model) {
+ this.resetAlert();
this.styleOptions = [];
this.selectedStyle = null;
this.carId = null;
@@ -287,6 +301,7 @@ export default {
}
},
async selectedStyle(style) {
+ this.resetAlert();
if (style) {
this.getVehicleDetails();
} else {
@@ -345,8 +360,15 @@ export default {
this.imageUrl = result?.data.imageUrl;
this.imageVifNumber = result?.data.imageVifNumber;
this.imageVifColor = result?.data.imageVifColor;
+ this.canSafeliteService = result?.data.canSafeliteService;
+ this.getCanSafeliteService(this.canSafeliteService);
+ },
+ getCanSafeliteService(canSafeliteService) {
+ this.displayNoServiceAlert = !canSafeliteService;
+ },
+ resetAlert() {
+ this.displayNoServiceAlert = false;
},
-
async forwardButtonAction() {
await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
this.dispatchStoreAction(
@@ -441,6 +463,7 @@ export default {
funnelSubHeader,
vehicleBanner,
Form,
+ alert,
vehicleQuestion,
},
};