Merge pull request #1004 from Safelite/feature/CSR-1088
Feature/csr 1088
This commit is contained in:
Leah Schumann
GitHub
commit
749b4787f4
8 changed files with 106 additions and 41 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
@ -159,15 +161,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(
|
||||
|
|
@ -178,6 +178,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();
|
||||
|
|
@ -190,8 +198,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,
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<serviceZipModalQuestion
|
||||
v-model="serviceZipCodeQuestion"
|
||||
ref="serviceZipCodeQuestion"
|
||||
:mobileFeePart="mobileFeePart"
|
||||
@set-mobile-fee-part="setMobileFeePart"
|
||||
linkWidgetName="ServiceZipLinkWidget"
|
||||
modalWidgetName="ServiceZipModalWidget" />
|
||||
<alert
|
||||
|
|
@ -17,6 +19,7 @@
|
|||
<mobileLocationModalQuestions
|
||||
v-model="mobileLocationQuestions"
|
||||
:mobileFeePart="mobileFeePart"
|
||||
@set-mobile-fee-part="setMobileFeePart"
|
||||
ref="mobileLocationModalQuestions"
|
||||
linkWidgetName="MobileLocationLinkWidget"
|
||||
modalWidgetName="MobileLocationModalWidget" />
|
||||
|
|
@ -71,7 +74,7 @@ export default {
|
|||
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,
|
||||
|
|
@ -116,7 +119,7 @@ export default {
|
|||
},
|
||||
set: function (newValue) {
|
||||
if (newValue.zipCode !== this.zipCode) {
|
||||
this.resetMobileLocation(newValue);
|
||||
this.resetMobileLocation();
|
||||
}
|
||||
|
||||
this.state = newValue.state;
|
||||
|
|
@ -175,28 +178,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);
|
||||
|
|
|
|||
|
|
@ -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" }]];
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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}`,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue