jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-1073

Browse source
This commit is contained in:
Leah Schumann 2023-03-14 16:16:07 -04:00
commit 09a0328afa
12 changed files with 173 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/fmg-components/funnel-footer/funnel-footer.vue
View file

@ -34,6 +34,7 @@ import buttonMain from "@/ux-components/button-main/button-main";
export default {
name: "funnelFooter",
emits: ["BackClicked", "ForwardClicked"], // <--- should remove oodles of warnings in dev tools
props: {
isForwardActionDisabled: Boolean,
isBackButtonHidden: { type: Boolean, default: false },

2
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -66,7 +66,7 @@
<textLink
linkType="navigation"
text="Notice at collection"
href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">

6
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -50,7 +50,6 @@
v-model="addressModel.state"
ref="state"
:options="stateOptions"
initialValue="FL"
validationRules="state-required" />
</div>
<div class="col">
@ -406,6 +405,11 @@ export default {
}
},
},
modelValue: {
handler() {
this.setupAddressLookup();
},
},
},
components: {
textboxQuestion,

15
src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
View file

@ -1,13 +1,8 @@
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin.js";
export async function getPricedMobileFeePart(
serviceZipCode,
serviceType,
parentAccountNumber,
billToAccountNumber
) {
if (!serviceZipCode || !serviceType || !parentAccountNumber) {
export async function getPricedMobileFeePart(serviceZipCode) {
if (!serviceZipCode) {
return Promise.resolve(null);
}
@ -16,11 +11,7 @@ export async function getPricedMobileFeePart(
// Get the Mobile Fee Part
const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_MOBILE_FEE_PART,
{
serviceType: serviceType,
parentAccountNumber: parentAccountNumber,
billToAccountNumber: billToAccountNumber,
},
null,
false
);

26
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
View file

@ -93,6 +93,32 @@ const mockMixin = {
},
};
const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
let mobileFeePart = {};
if (mockServiceZipCode === "43235") {
mobileFeePart = {
partNumber: "MOBILE FEE",
description: "MOBILE FEE",
partType: "FEE",
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
};
}
return Promise.resolve(mobileFeePart);
};
jest.mock(
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
() => ({
getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
return mockGetPricedMobileFeePart(mockServiceZipCode);
}),
})
);
describe("mobile-location-modal-questions.vue", () => {
it("Should copy the modelValue to the internalModel when the component is mounted", async () => {
// Arrange

21
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -56,13 +56,15 @@ import modal from "@/digital-components/modal/modal";
import alert from "@/ux-components/alert/alert";
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
import store from "@/store";
// Helpers
import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
export default {
name: "mobile-location-modal-questions",
emits: ["update:modelValue", "updated-zip-code"], // The component emits an event
emits: ["update:modelValue", "set-mobile-fee-part"],
data() {
return {
internalModel: deepClone(this.modelValue),
@ -158,15 +160,13 @@ export default {
values: {
state: updatedServiceZipCodeInfo.state,
zipCode: updatedServiceZipCodeInfo.zipCode,
isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
},
});
},
resetModalButtonStyle() {
this.$refs[this.modalName].resetButtonStyle();
},
onAddressUpdated(updatedServiceZipCodeInfo) {
this.resetComponent(updatedServiceZipCodeInfo);
},
async setMobileLocation() {
// Validate the Zip Code
const zipCodeData = await this.getZipCodeData(
@ -177,6 +177,14 @@ export default {
this.displayInvalidZipAlert = true;
this.resetModalButtonStyle();
} else {
// retrieve mobile fee part
const serviceZipCode = this.internalModel.addressQuestions.zipCode;
const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
// emit it to parent
this.$emit("set-mobile-fee-part", mobileFeePart);
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
this.closeModal();
@ -189,8 +197,9 @@ export default {
this.internalModel = deepClone(newValue);
this.resetComponent({
state: newValue.state,
zipCode: newValue.zipCode,
state: newValue.addressQuestions.state,
zipCode: newValue.addressQuestions.zipCode,
isVehicleProtected: newValue.isVehicleProtected,
});
},
deep: true,

34
src/layouts/service-location/service-location.spec.js
View file

@ -41,6 +41,22 @@ jest.mock(
})
);
jest.spyOn(baseMixin.methods, "getZipCodeData").mockImplementation((serviceZipCode) => {
return new Promise((resolve) => {
let mockContainsMilitaryBase = false;
if (serviceZipCode === 45433 || serviceZipCode === "45433") {
mockContainsMilitaryBase = true;
}
resolve({
containsMilitaryBase: mockContainsMilitaryBase,
isValid: true,
isServiceable: true,
state: "OH",
zipCodeCtu: "01820",
});
});
});
jest.mock("@/store", () => ({
commit: jest.fn(),
dispatch: jest.fn(),
@ -291,6 +307,24 @@ describe("service-location.vue", () => {
// Assert
expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
});
test("displays military zip message when zip is updated", () => {
// Arrange
const { wrapper } = setupMocks({});
wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
const newServiceZipCodeQuestion = {
zipCode: "45433",
state: "OH",
};
// Assert
wrapper.setData({ zipCode: newServiceZipCodeQuestion.zipCode });
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
});
});
});
describe("updating mobile location", () => {

58
src/layouts/service-location/service-location.vue
View file

@ -8,6 +8,8 @@
<serviceZipModalQuestion
v-model="serviceZipCodeQuestion"
ref="serviceZipCodeQuestion"
:mobileFeePart="mobileFeePart"
@set-mobile-fee-part="setMobileFeePart"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget" />
<serviceTypeQuestion
@ -16,17 +18,23 @@
groupName="ServiceTypeQuestion"
cmsWidgetName="ServiceTypeQuestionWidget"
validationRules="option-required" />
<alert
class="my-4"
cmsWidgetName="AlertMilitaryBaseZipWidget"
v-if="zipContainsMilitaryBase"
alertClass="alert-warning" />
<mobileLocationModalQuestions
v-if="selectedServiceType === 'Mobile'"
v-model="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
@set-mobile-fee-part="setMobileFeePart"
ref="mobileLocationModalQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
@ -36,6 +44,7 @@
<script>
// Components
import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
import serviceTypeQuestion from "@/layouts/service-location/service-type-question/service-type-question";
@ -45,6 +54,9 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
// Supporting files
import baseMixin from "@/mixins/base-mixin.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@ -64,17 +76,17 @@ export default {
isZipServiceableMobile: null,
isZipServiceableInShop: null,
mobileFeePart: null,
zipContainsMilitaryBase: false,
selectedServiceType: null,
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const serviceZipCode = store.getters.order.serviceLocation.zipCode;
const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
const parentAccountNumber = store.getters.payment.parentAccountNumber;
const billToAccountNumber = 0;
const billToAccountNumber = 1;
const mobileFeePartPromise = getPricedMobileFeePart(
serviceZipCode,
@ -93,6 +105,10 @@ export default {
resultKey: "mobileFeePart",
promise: mobileFeePartPromise,
},
{
resultKey: "zipCodeData",
promise: baseMixin.methods.getZipCodeData(serviceZipCode),
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -101,6 +117,8 @@ export default {
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.setData(resultMap.mobileFeePart);
vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
vm.zipCode = serviceZipCode;
});
},
computed: {
@ -113,7 +131,7 @@ export default {
},
set: function (newValue) {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation(newValue);
this.resetMobileLocation();
}
this.state = newValue.state;
@ -143,6 +161,9 @@ export default {
this.isVehicleProtected = newValue.isVehicleProtected;
},
},
shouldDisableForwardAction() {
return this.zipContainsMilitaryBase;
},
},
methods: {
arePagePrerequisitesValid() {
@ -170,28 +191,15 @@ export default {
getServiceZipCodeFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
resetMobileFeePart(serviceZipCode) {
const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
const parentAccountNumber = store.getters.payment.parentAccountNumber;
const billToAccountNumber = 0;
getPricedMobileFeePart(
serviceZipCode,
serviceType,
parentAccountNumber,
billToAccountNumber
).then((pricedMobileFeePart) => {
this.mobileFeePart = pricedMobileFeePart;
});
setMobileFeePart(mobileFeePart) {
this.mobileFeePart = mobileFeePart;
},
resetMobileLocation(updatedServiceZipCodeInfo) {
resetMobileLocation() {
this.streetAddress = "";
this.apartmentNumberOrBusinessName = "";
this.city = "";
this.isVehicleProtected = null;
this.resetMobileFeePart(updatedServiceZipCodeInfo.zipCode);
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
@ -200,7 +208,17 @@ export default {
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
},
},
watch: {
zipCode(current, previous) {
if (current !== previous) {
baseMixin.methods.getZipCodeData(current).then((r) => {
this.zipContainsMilitaryBase = r.containsMilitaryBase;
});
}
},
},
components: {
alert,
serviceZipModalQuestion,
serviceTypeQuestion,
mobileLocationModalQuestions,

28
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
View file

@ -16,6 +16,32 @@ jest.mock("@/digital-components/modal/modal", () => ({
},
}));
const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
let mobileFeePart = {};
if (mockServiceZipCode === "43235") {
mobileFeePart = {
partNumber: "MOBILE FEE",
description: "MOBILE FEE",
partType: "FEE",
laborAmount: 49.99,
sellingPrice: 0,
kitPrice: 0,
};
}
return Promise.resolve(mobileFeePart);
};
jest.mock(
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
() => ({
getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
return mockGetPricedMobileFeePart(mockServiceZipCode);
}),
})
);
const linkWidgetName = "linkWidgetName";
const modalWidgetName = "modalWidgetName";
@ -126,6 +152,7 @@ describe("service-zip-modal-question.vue", () => {
mixins: [mockMixin],
props: {
modelValue: serviceZipCodeQuestion,
mobileFeePart: {},
linkWidgetName: linkWidgetName,
modalWidgetName: modalWidgetName,
},
@ -134,6 +161,7 @@ describe("service-zip-modal-question.vue", () => {
// Act
wrapper.vm.internalModel.zipCode = zip;
await wrapper.vm.setZipCode();
let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];

17
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -38,9 +38,12 @@ import textLink from "@/ux-components/text-link/text-link";
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
import modal from "@/digital-components/modal/modal";
import alert from "@/ux-components/alert/alert";
import store from "@/store";
import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
export default {
name: "service-zip-modal-question",
emits: ["update:modelValue", "set-mobile-fee-part"],
data() {
return {
internalModel: this.copyModel(this.modelValue),
@ -56,6 +59,10 @@ export default {
zipCode: "",
}),
},
mobileFeePart: {
type: Object,
default: () => ({}),
},
linkWidgetName: String,
modalWidgetName: String,
},
@ -136,17 +143,23 @@ export default {
this.resetAlerts();
const zipCodeData = await this.getZipCodeData(this.internalModel.zipCode);
this.resetModalButtonStyle();
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
this.focusOnZipInput();
this.resetModalButtonStyle();
} else {
this.internalModel.state = zipCodeData.state;
// retrieve mobile fee part
const serviceZipCode = this.internalModel.zipCode;
const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
// emit it to parent
this.$emit("set-mobile-fee-part", mobileFeePart);
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
this.closeModal();
}
},

1
src/mixins/base-mixin.js
View file

@ -57,6 +57,7 @@ export default {
);
return {
containsMilitaryBase: serviceZipValidationResponse.data.containsMilitaryBase,
isValid: serviceZipValidationResponse.data.isValid,
isServiceable: serviceZipValidationResponse.data.isServiceable,
state: serviceZipValidationResponse.data.state,

8
src/store/index.js
View file

@ -916,9 +916,13 @@ export const actions = {
},
getMobileFeePart(context) {
return globalMethods.callMockHttpClient({
const serviceType = context.getters.damage.isRepair ? "Repair" : "Replace";
const parentAccountNumber = context.getters.payment.parentAccountNumber;
const billToAccountNumber = 87291; // TODO: MAKE THIS REAL
return globalMethods.callHttpClient({
method: endpoints.GetMobileFeePart.method,
endpoint: "https://run.mocky.io/v3/795de4cb-d014-48b4-9338-dab33261adce", //TODO: Remove Mocky Endpoint
endpoint: `${endpoints.GetMobileFeePart.url}/${serviceType}/${parentAccountNumber}/${billToAccountNumber}`,
});
},