- {{ questionText }}
+
+ {{ questionText }}
-
-
+
@@ -160,7 +160,7 @@ export default {
};
-
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index a64d873f9..8e6ae0faa 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -1,5 +1,5 @@
-
+
@@ -51,7 +51,6 @@ export default {
isForwardActionDisabled: Boolean,
isBackButtonHidden: {type: Boolean, default: false},
cmsWidgetName: String,
-
},
components: {
textLink,
@@ -64,7 +63,7 @@ export default {
}
},
mounted() {
- this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
+ this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
})
@@ -106,7 +105,7 @@ export default {
linkClick() {
this.$emit("BackClicked");
},
- }
+ },
};
diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 741800792..7beb113a4 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,16 +1,9 @@
-
+
@@ -18,11 +11,15 @@
@@ -159,6 +164,7 @@ export default {
border: 1px solid $gray-500;
border-radius: .5rem;
min-height: 3rem;
+ padding: 12px 16px;
&::placeholder {
color: $gray-500;
}
@@ -182,4 +188,4 @@ export default {
display: none;
}
}
-
\ No newline at end of file
+
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index a9f09326b..b4d073496 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,11 +18,12 @@ const errorMessages = {
LAST_NAME_REQUIRED: "Please enter your last name",
EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
- SERVICE_ZIP_REQUIRED: "Please enter your Service ZIP",
- SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP",
+ SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
+ SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
VIN_REQUIRED: "Please enter your VIN",
VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
OPTION_REQUIRED: "Please select an option",
+ VEHICLE_REQUIRED: "Please select a vehicle",
};
export { errorMessages };
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 2a0a7f29d..fe658fbe1 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -22,6 +22,7 @@ const storeActions = {
LOG_PAGE_VIEW: "logPageView",
LOG_CUSTOM_EVENT: "logCustomEvent",
GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
+ UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION: "updateServiceLocationWithVehicleRegistration",
// DEPENDENCY MUTATIONS
RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index 65f4719ec..179b484ef 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -44,8 +44,8 @@ const storeMutations = {
// OTHER MUTATIONS
UPDATE_PAGE_DATA: "updatePageData",
- UPDATE_STATE_WITH_ORDER_INFORMATION: "updateStateWithOrderInformation"
-
+ UPDATE_STATE_WITH_ORDER_INFORMATION: "updateStateWithOrderInformation",
+ UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION: "updateServiceLocationWithVehicleRegistration"
};
export { storeMutations };
diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js
index f47499bed..0928a2656 100644
--- a/src/helpers/damage-helper.js
+++ b/src/helpers/damage-helper.js
@@ -4,8 +4,18 @@ import { storeActions } from "@/constants/store-actions";
export function getDamageString() {
const damageLocations = store.getters.damage.glassToReplace;
+ const isRepair = store.getters.damage.isRepair;
+
let returnString;
- if(damageLocations.length > 1){
+ if (!damageLocations) {
+ return;
+ }
+ // If it's a repair it's always a windshield.
+ if(isRepair){
+ return "windshield"
+ }
+
+ if (damageLocations.length > 1) {
returnString = "match"
} else {
switch(damageLocations[0]?.location) {
diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js
index c7cf34940..9bf69ddcf 100644
--- a/src/helpers/heritage-integration/navigation-helper.js
+++ b/src/helpers/heritage-integration/navigation-helper.js
@@ -3,8 +3,10 @@ import { externalUrls } from "@/router/router-constants/externalUrl-values";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import { saveOrder } from "@/helpers/heritage-integration/order-helper.js";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import router from "@/router";
+import baseMixin from "@/mixins/base-mixin.js";
/*
If the user has visited the funnel before this method will determine the bets place to
@@ -12,7 +14,6 @@ import router from "@/router";
the user has an existing order and they come back in from the Safelite.com CTA.
*/
export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHeritageOrder = false) {
-
// If the user is coming in via the Safelite.Com CTA
if (toRoute.query[queryStrings.START_TYPE] === 'fmg') {
// If they have an existing order, return 'heritage' for the page name.
@@ -56,6 +57,7 @@ export async function navigateToHeritageFunnel() {
export async function navigateAfterSaveToHeritageFunnel(currentRoute) {
const currentComponent = currentRoute.matched[0].components;
currentComponent.default.methods.resetDependentState();
+
// Create the order (or save existing order) when navigating to Heritage Funnel.
await saveOrder();
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index cebc7e414..71e91f11a 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -12,28 +12,28 @@
car.vehicle.carId === carEntered.carId);
+ if (matchingCars.length === 1) {
+ // and one and only one of them matches the carId entered, save the vehicle info
+ // so we can go to the Heritage Funnel directly
+ const matchingCar = matchingCars[0];
+ this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
+ }
+
// update data if the zip or service zip is servicable
this.updateCustomerInfo();
}
@@ -275,6 +282,8 @@ export default {
this.displayVinLookupByHomeAddressNotAllowedAlert = false;
},
navigateForward(carEntered, carsFound) {
+ this.updateServiceLocationIfNecessary();
+
if (carsFound.length == 1) {
// if a different vehicle is found than the one entered and the selected glass
// is not available for that vehicle
@@ -293,16 +302,18 @@ export default {
navigateAfterSaveToHeritageFunnel(this.$route);
}
} else if (carsFound.length > 1) {
- // if multiple cars were found
- if (carsFound.find(car => car.vehicle.carId === carEntered.carId)) {
- // and one of them matches the car id entered
+ // if multiple cars were found
+ let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
+ if (matchingCars.length === 1) {
this.$refs.loadingModal.showModal();
+
+ // and one and only of them matches the car id entered
+ const matchingCar = matchingCars[0];
+ this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
navigateAfterSaveToHeritageFunnel(this.$route);
} else {
- // and there is no match, navigate to "address-vehicles" page
- this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
- this.$route, {}, {},
- carsFound);
+ // if there are no matches or there are multiple matches, navigate to "address-vehicles" page
+ this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
}
}
@@ -344,8 +355,16 @@ export default {
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
- },
-
+ },
+ updateServiceLocationIfNecessary() {
+ const serviceLocation = store.getters.order.serviceLocation;
+
+ if (!serviceLocation.address && serviceLocation.zipCode && serviceLocation.zipCode == store.getters.vehicle.registration.zipCode) {
+ baseMixin.methods.dispatchStoreAction(
+ storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
+ );
+ }
+ }
},
mounted() {
this.attachCustomEvents();
@@ -364,13 +383,14 @@ export default {
return text;
},
AlertMatchedDifferentVehicleBody(){
- let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
- content = content.replaceAll("{custom:glassText}", getDamageString());
- const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
- const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
- content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound);
- content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+ const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+ const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
+
+ const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+ .replaceAll("{custom:glassText}", getDamageString())
+ .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+ .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
return content;
},
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 4408a803f..98c0ca927 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -1,32 +1,70 @@
-
\ No newline at end of file
+
+
+
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index 0eb82d91b..51bb2b770 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -2,17 +2,39 @@
- 
- 
-
-
-
-
- Please wait...
-
-
- This process can take up to 20 seconds.
+
-
-
-
-
-
-
+
@@ -29,7 +51,7 @@ import { errorMessages } from "@/constants/error-messages";
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
+defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
export default ({
name: "customer-questions",
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js1 b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js1
new file mode 100644
index 000000000..05fd2a0eb
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js1
@@ -0,0 +1,113 @@
+import { shallowMount } from "@vue/test-utils";
+import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+// import store from "@/store";
+
+// jest.mock("@/store", () => { return {}; }, { virtual: true });
+
+describe("addressVehiclesQuestion.vue", () => {
+
+ it("Should include button-question component", () => {
+ // Arrange
+ const wrapper = shallowMount(addressVehiclesQuestion, {
+ propsData: {
+ // vehicles: [
+ // {
+ // "Name": "testname",
+ // "Text": "testtext",
+ // }
+ // ]
+ }
+ });
+
+ // console.log('wrapper.html: ', wrapper.html());
+
+ // Assert
+ const buttonQuestion = wrapper.find('button-question-stub');
+ expect(buttonQuestion).toBe;
+ });
+
+ it("on initialize should pass in questionText", () => {
+ // Arrange
+ const wrapper = shallowMount(addressVehiclesQuestion, {
+ propsData: {},
+ });
+
+ //Act
+ addressVehiclesQuestion.methods.initializeComponent.call(wrapper.vm, {QuestionText: 'Testing question text'});
+
+ // console.log('wrapper.html: ', wrapper.html());
+ // console.log('wrapper.vm.questionText: ', wrapper.vm.questionText);
+
+ // Assert
+ expect(wrapper.vm.questionText).toEqual('Testing question text');
+ });
+
+ // it("Alert should show if prop isCarIdDifferent is true", () => {
+ // // Arrange
+ // const wrapper = shallowMount(addressVehiclesQuestion, setupMountOptions({
+ // propsData: {
+ // isCarIdDifferent: true,
+ // }
+ // }));
+
+ // //Act
+ // const alert = wrapper.find('alert');
+ // console.log('wrapper.html: ', wrapper.html());
+ // console.log('wrapper.vm.questionText: ', wrapper.vm.questionText);
+
+ // // Assert
+ // // expect(wrapper.vm.questionText).toEqual('Testing question text');
+ // });
+
+});
+
+
+
+function setupMountOptions(mountOptionsMockData = {}) {
+ // //Mock store
+ // store.dispatch = jest.fn(() => {});
+ // store.getters = {};
+
+ // const mockMixin = {
+ // methods: {
+ // getCmsContent: jest.fn().mockImplementation(() => {
+ // return '';
+ // }),
+ // getDamageString: jest.fn().mockImplementation(() => {
+ // return '';
+ // })
+ // },
+ // store: {
+ // dispatch: store.dispatch,
+ // getters: store.getters,
+ // },
+ // }
+
+ const mockGetCmsContent = jest.fn();
+ mockGetCmsContent((cmsWidget, field) => {
+ return field
+ });
+ const defaultMountOptions = {
+ // route: { query: { fmgPage: 'page-name' } },
+ mixins: {
+ methods: {
+ getCmsContent: mockGetCmsContent,
+ },
+ },
+ global: {
+ mocks: {
+ store: {
+ dispatch: store.dispatch,
+ getters: store.getters,
+ },
+ },
+ },
+ };
+ const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData));
+ const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+ console.log('what are allMountOptions??? ', allMountOptions);
+
+ return allMountOptions;
+}
\ No newline at end of file
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
new file mode 100644
index 000000000..95d2b1fd0
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -0,0 +1,94 @@
+
+
@@ -46,25 +87,25 @@ import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
// Supporting files
-import {
- fetchCmsContentForPage
+import {
+ fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
- settleAllPromises
+ settleAllPromises
} from "@/helpers/layout-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import {
- storeActions
+ storeActions
} from "@/constants/store-actions";
import {
- storeMutations
+ storeMutations
} from "@/constants/store-mutations";
import {
- errorMessages
+ errorMessages
} from "@/constants/error-messages";
-import {
- navigateAfterSaveToHeritageFunnel
+import {
+ navigateAfterSaveToHeritageFunnel
} from "@/helpers/heritage-integration/navigation-helper";
import {
getDamageString,
@@ -92,7 +133,7 @@ defineRule(
defineRule(
"email-address-format",
regex(
- /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
+ /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
@@ -256,7 +297,7 @@ export default {
vinLookup.data.vehicle,
zipValidation.data.state
);
-
+
this.navigateForward();
},
navigateForward() {
@@ -281,10 +322,7 @@ export default {
});
},
lookupVin(plate, state) {
- return baseMixin.methods.dispatchStoreAction(
- storeActions.LOOKUP_VIN_BY_PLATE,
- { licensePlate: plate, licenseState: state }
- );
+ return baseMixin.methods.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_PLATE,{ licensePlate: plate, licenseState: state }, false);
},
updateCustomerInfo(vin, vehicleInfo, registrationState) {
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
@@ -335,4 +373,4 @@ export default {
loadingModal,
},
};
-
\ No newline at end of file
+
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index a4b2bfdc8..ddeae5bec 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -87,8 +87,6 @@ import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
-import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { queryStrings } from "@/constants/query-strings";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 1e9cfbc0a..6e7c844ff 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -10,7 +10,7 @@
-
-
-
-
-
-
+
{
model: "ILX",
style: "4 DOOR SEDAN",
carId: "C0000001",
- category: "CAR"
+ category: "CAR",
+ registration: {}
+ },
+ damage: {
+ glassToReplace: ["Windshield"],
+ isRepair: false,
+ numberOfChips: 0,
},
- glassToReplace: ["Windshield"],
- isRepair: false,
- numberOfChips: 0,
parts: [],
accountNumber: "123456789",
- insuranceInfo: {}
+ insuranceInfo: {},
+ serviceLocation: {},
+ customer: {}
});
// Assert
@@ -562,11 +567,16 @@ describe("Actions", () => {
const context = state;
context.getters = {
- vehicle: {},
+ vehicle: {
+ registration: {}
+ },
damage: {},
};
context.state = {
- order: {}
+ order: {
+ serviceLocation: {},
+ customer: {}
+ }
};
globalMethods.callHttpClient.mockImplementation(() => {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 369c39a0e..587900512 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,8 +1,9 @@
html {
.has-error {
&.list-button,
- &.list-card,
+ &.list-card,
&.list-card.list-button {
+ border: none;
color: $red;
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {
@@ -13,15 +14,16 @@ html {
}
&:hover {
box-shadow: 0px 0px 0px 4px $red-200;
- border-radius: 10px;
+ border-radius: .5rem;
}
label {
- border: 1px solid $red;
+ border: 1px solid $red;
+ border-radius: .5rem;
}
label:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 10px;
- border: 1px solid $red;
+ border: 1px solid $red;
}
}
&.list-button-horizontal {
@@ -51,12 +53,21 @@ html {
}
&.textbox-question,
&.dropdown-question {
+ input:hover {
+ box-shadow: 0px 0px 0px 4px $red-200;
+ border-radius: .5rem;
+ border: 1px solid $red;
+ }
+ input:focus {
+ box-shadow: 0 0 0 2.5px $red;
+ }
p {
color: $red;
}
input,
select {
- border: 1px solid $red;
+ border: 1px solid transparent;
+ box-shadow: 0 0 0 1px $red;
&:focus {
border: 1px solid transparent;
}
@@ -114,8 +125,6 @@ html {
color: $red;
font-size: .875rem;
font-weight: 500;
- height: 1.5rem;
- margin-top: .25rem !important;
}
.form-test-invalid {
@@ -129,7 +138,6 @@ html {
&.btn.btn-primary:hover,
&.btn.btn-primary:focus,
&.btn.btn-primary:focus-visible {
- color: $gray !important;
background: $gray-200;
box-shadow: none;
}
diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js
index 6f4bb9822..59becf922 100644
--- a/src/ux-components/alert/alert.spec.js
+++ b/src/ux-components/alert/alert.spec.js
@@ -66,6 +66,7 @@ describe("alert.vue", () => {
const mockMixin = {
methods: {
- getCmsContent: jest.fn()
+ getCmsContent: jest.fn(),
+ getFooterInfoBoxHeight: jest.fn(()=> 80),
}
}
\ No newline at end of file
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 3dc64e497..5c0d7a270 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -5,15 +5,17 @@
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
>
+
{{ alertHeadline }}
-
-
-
-
+
+
+
+