Merge pull request #1659 from Safelite/feature/Digital/csr-1727.1

State/zip mismatch alert
This commit is contained in:
hiteshkumar87 2023-12-22 17:36:15 +05:30 committed by GitHub
commit d8ec9c2c7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 1 deletions

View file

@ -337,6 +337,51 @@ describe("mobile-location-modal-questions.vue", () => {
// Assert
expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
});
it("Should display mismatch state and zip alert for non-matching state/zip for mobile address zip inputs", async () => {
// Arrange
const mobileLocationQuestions = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: true,
serviceZipCode: "",
};
const newMobileLocationQuestions = {
addressQuestions: {
streetAddress: "555 Some St",
apartmentNumberOrBusinessName: "Apt 1",
city: "Funkytown",
state: "AK",
zipCode: "55555",
},
isVehicleProtected: true,
serviceZipCode: "55555",
};
const wrapper = shallowMount(mobileLocationModalQuestions, {
mixins: [mockMixin],
props: {
modelValue: mobileLocationQuestions,
linkWidgetName: linkWidgetName,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
wrapper.vm.internalModel = newMobileLocationQuestions;
wrapper.vm.resetModalButtonStyle = jest.fn();
// Act
await wrapper.vm.setMobileLocation();
// Assert
expect(wrapper.vm.displayMismatchStateAndZipAlert).toBe(true);
});
});
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

View file

@ -55,6 +55,13 @@
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
ref="alertMismatchStateAndZip"
v-if="displayMismatchStateAndZipAlert"
class="my-4"
cmsWidgetName="AlertMismatchStateAndZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
</template>
</modal>
</div>
@ -89,6 +96,7 @@ export default {
internalModel: deepClone(this.modelValue),
displayInvalidZipAlert: false,
isModalOpened: false,
displayMismatchStateAndZipAlert: false,
};
},
setup(props) {
@ -213,17 +221,22 @@ export default {
this.modal.closeModal();
},
onModalClosed() {
this.displayInvalidZipAlert = false;
this.resetAlerts();
this.internalModel = deepClone(this.modelValue);
},
resetModalButtonStyle() {
this.modal.resetButtonStyle();
},
resetAlerts() {
this.displayInvalidZipAlert = false;
this.displayMismatchStateAndZipAlert = false;
},
async setMobileLocation() {
if (
this.internalModel.addressQuestions.zipCode !==
this.modelValue.addressQuestions.zipCode
) {
this.resetAlerts();
// Validate the Zip Code
const zipCodeData = await this.getZipCodeData(
this.internalModel.addressQuestions.zipCode,
@ -233,6 +246,9 @@ export default {
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
this.resetModalButtonStyle();
} else if (zipCodeData.state != this.internalModel.addressQuestions.state) {
this.displayMismatchStateAndZipAlert = true;
this.resetModalButtonStyle();
} else {
// retrieve mobile fee part
const serviceZipCode = this.internalModel.addressQuestions.zipCode;