CSR-1384: refactor updates from tech review
This commit is contained in:
parent
374fc95342
commit
afb2cbae73
5 changed files with 55 additions and 60 deletions
|
|
@ -37,13 +37,13 @@ describe("cart.vue", () => {
|
||||||
promos: [],
|
promos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableVaps = [];
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
props: {
|
props: {
|
||||||
modelValue: lineItems,
|
modelValue: lineItems,
|
||||||
availableLineItems: availableLineItems,
|
availableVaps: availableVaps,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -89,13 +89,13 @@ describe("cart.vue", () => {
|
||||||
promos: [],
|
promos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableVaps = [];
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
props: {
|
props: {
|
||||||
modelValue: lineItems,
|
modelValue: lineItems,
|
||||||
availableLineItems: availableLineItems,
|
availableVaps: availableVaps,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -132,13 +132,13 @@ describe("cart.vue", () => {
|
||||||
promos: [],
|
promos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableVaps = [];
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
props: {
|
props: {
|
||||||
modelValue: lineItems,
|
modelValue: lineItems,
|
||||||
availableLineItems: availableLineItems,
|
availableVaps: availableVaps,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -189,13 +189,13 @@ describe("cart.vue", () => {
|
||||||
// promos: [],
|
// promos: [],
|
||||||
// };
|
// };
|
||||||
|
|
||||||
// const availableLineItems = [];
|
// const availableVaps = [];
|
||||||
|
|
||||||
// // Act
|
// // Act
|
||||||
// const { wrapper } = setupMocks({
|
// const { wrapper } = setupMocks({
|
||||||
// props: {
|
// props: {
|
||||||
// modelValue: lineItems,
|
// modelValue: lineItems,
|
||||||
// availableLineItems: availableLineItems,
|
// availableVaps: availableVaps,
|
||||||
// },
|
// },
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
|
@ -234,13 +234,13 @@ describe("cart.vue", () => {
|
||||||
promos: [],
|
promos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableVaps = [];
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
props: {
|
props: {
|
||||||
modelValue: lineItems,
|
modelValue: lineItems,
|
||||||
availableLineItems: availableLineItems,
|
availableVaps: availableVaps,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -277,13 +277,13 @@ describe("cart.vue", () => {
|
||||||
promos: [],
|
promos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableVaps = [];
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
props: {
|
props: {
|
||||||
modelValue: lineItems,
|
modelValue: lineItems,
|
||||||
availableLineItems: availableLineItems,
|
availableVaps: availableVaps,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -321,13 +321,13 @@ describe("cart.vue", () => {
|
||||||
promos: [],
|
promos: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableVaps = [];
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
const { wrapper } = setupMocks({
|
const { wrapper } = setupMocks({
|
||||||
props: {
|
props: {
|
||||||
modelValue: lineItems,
|
modelValue: lineItems,
|
||||||
availableLineItems: availableLineItems,
|
availableVaps: availableVaps,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -121,7 +121,7 @@ export default {
|
||||||
modelValue: Object,
|
modelValue: Object,
|
||||||
damage: Object,
|
damage: Object,
|
||||||
servicePackageOptionsCmsName: String,
|
servicePackageOptionsCmsName: String,
|
||||||
availableLineItems: Object,
|
availableVaps: Object,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -189,6 +189,16 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
availableLineItems() {
|
||||||
|
if (!this.lineItems || this.lineItems.length < 1) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
...this.lineItems.glassParts,
|
||||||
|
...this.lineItems.supportingItems,
|
||||||
|
...this.availableVaps,
|
||||||
|
];
|
||||||
|
},
|
||||||
cartItems: {
|
cartItems: {
|
||||||
get: function () {
|
get: function () {
|
||||||
let cartItems = [];
|
let cartItems = [];
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ export default {
|
||||||
name: "add-vaps-modal-buttons",
|
name: "add-vaps-modal-buttons",
|
||||||
props: {
|
props: {
|
||||||
vapsTilesCmsName: String,
|
vapsTilesCmsName: String,
|
||||||
availableLineItems: Object,
|
availableVaps: Object,
|
||||||
modelValue: Object,
|
modelValue: Object,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -198,7 +198,7 @@ export default {
|
||||||
return modelValue;
|
return modelValue;
|
||||||
},
|
},
|
||||||
rainDefenseModal() {
|
rainDefenseModal() {
|
||||||
const lineItem = this.availableLineItems.find((item) => {
|
const lineItem = this.availableVaps.find((item) => {
|
||||||
return item.partType === partTypeStrings.RAIN_DEFENSE;
|
return item.partType === partTypeStrings.RAIN_DEFENSE;
|
||||||
});
|
});
|
||||||
if (lineItem)
|
if (lineItem)
|
||||||
|
|
@ -209,10 +209,10 @@ export default {
|
||||||
},
|
},
|
||||||
wipersModal() {
|
wipersModal() {
|
||||||
// create a single wiper item for modal
|
// create a single wiper item for modal
|
||||||
const frontWiperLineItems = this.availableLineItems.filter((item) => {
|
const frontWiperLineItems = this.availableVaps.filter((item) => {
|
||||||
return item.partType.includes(partTypeStrings.FRONT_WIPER);
|
return item.partType.includes(partTypeStrings.FRONT_WIPER);
|
||||||
});
|
});
|
||||||
const rearWiperLineItems = this.availableLineItems.filter((item) => {
|
const rearWiperLineItems = this.availableVaps.filter((item) => {
|
||||||
return item.partType.includes(partTypeStrings.REAR_WIPER);
|
return item.partType.includes(partTypeStrings.REAR_WIPER);
|
||||||
});
|
});
|
||||||
let wipersModal;
|
let wipersModal;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
<cart
|
<cart
|
||||||
:damage="damageInfo"
|
:damage="damageInfo"
|
||||||
:availableLineItems="availableLineItems"
|
:availableVaps="availableVaps"
|
||||||
v-model="lineItems"
|
v-model="lineItems"
|
||||||
servicePackageOptionsCmsName="ServicePackageTitle"
|
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||||
@cart-remove="cartRemove" />
|
@cart-remove="cartRemove" />
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
|
|
||||||
<add-vaps-modal-buttons
|
<add-vaps-modal-buttons
|
||||||
v-model="lineItems"
|
v-model="lineItems"
|
||||||
:availableLineItems="availableLineItems"
|
:availableVaps="availableVaps"
|
||||||
vapsTilesCmsName="VapsProductTiles"
|
vapsTilesCmsName="VapsProductTiles"
|
||||||
@added-to-cart="showAlert" />
|
@added-to-cart="showAlert" />
|
||||||
|
|
||||||
|
|
@ -90,13 +90,14 @@ import {
|
||||||
} from "@/helpers/promotions-helper";
|
} from "@/helpers/promotions-helper";
|
||||||
import { queryStrings } from "@/constants/query-strings";
|
import { queryStrings } from "@/constants/query-strings";
|
||||||
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
||||||
|
import { deepClone } from "@/helpers/object-helper";
|
||||||
|
|
||||||
import { Form } from "vee-validate";
|
import { Form } from "vee-validate";
|
||||||
import { defineRule } from "vee-validate";
|
import { defineRule } from "vee-validate";
|
||||||
import { required } from "@/helpers/validation-rules";
|
import { required } from "@/helpers/validation-rules";
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||||
import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
|
import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
||||||
|
|
||||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||||
|
|
||||||
|
|
@ -118,12 +119,6 @@ export default {
|
||||||
"payment-method"
|
"payment-method"
|
||||||
);
|
);
|
||||||
|
|
||||||
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
|
||||||
storeActions.GET_SUPPORTING_ITEMS,
|
|
||||||
null,
|
|
||||||
"payment-method"
|
|
||||||
);
|
|
||||||
|
|
||||||
const promiseResultMap = [
|
const promiseResultMap = [
|
||||||
{
|
{
|
||||||
resultKey: "cmsContent",
|
resultKey: "cmsContent",
|
||||||
|
|
@ -137,29 +132,25 @@ export default {
|
||||||
resultKey: "rainDefense",
|
resultKey: "rainDefense",
|
||||||
promise: rainDefensePromise,
|
promise: rainDefensePromise,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
resultKey: "supportingItems",
|
|
||||||
promise: supportingItemsPromise,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const resultMap = await settleAllPromises(promiseResultMap);
|
const resultMap = await settleAllPromises(promiseResultMap);
|
||||||
|
const lineItemsFromStore = deepClone(store.getters.order.lineItems);
|
||||||
|
const glassParts = lineItemsFromStore.glassParts ?? [];
|
||||||
|
const supportingItems = lineItemsFromStore.supportingItems ?? [];
|
||||||
|
|
||||||
const glassParts = store.getters.order.lineItems.glassParts ?? [];
|
const lineItemsToTax = [
|
||||||
|
|
||||||
let availableLineItems = [
|
|
||||||
resultMap.rainDefense,
|
resultMap.rainDefense,
|
||||||
...resultMap.supportingItems,
|
...supportingItems,
|
||||||
...resultMap.wipers,
|
...resultMap.wipers,
|
||||||
...glassParts,
|
...glassParts,
|
||||||
];
|
];
|
||||||
|
const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
|
||||||
|
|
||||||
const lineItemsFromStore = store.getters.order.lineItems;
|
const pricedLineItemsToTax = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
|
|
||||||
await baseMixin.methods.dispatchStoreActionWithLogging(
|
|
||||||
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||||
{
|
{
|
||||||
availableLineItems: availableLineItems,
|
availableLineItems: lineItemsToTax,
|
||||||
},
|
},
|
||||||
"payment-method",
|
"payment-method",
|
||||||
false
|
false
|
||||||
|
|
@ -171,14 +162,14 @@ export default {
|
||||||
const { validatePromoResponse, revalidatePromoResponse } =
|
const { validatePromoResponse, revalidatePromoResponse } =
|
||||||
await revalidatePromosAndValidateNewPromo(
|
await revalidatePromosAndValidateNewPromo(
|
||||||
promoCodeFromQueryString,
|
promoCodeFromQueryString,
|
||||||
availableLineItems,
|
pricedLineItemsToTax,
|
||||||
"payment-method"
|
"payment-method"
|
||||||
);
|
);
|
||||||
|
|
||||||
availableLineItems.push(...(validatePromoResponse?.orderPromos ?? []));
|
pricedLineItemsToTax.push(...(validatePromoResponse?.orderPromos ?? []));
|
||||||
// End of promo logic
|
// End of promo logic
|
||||||
|
|
||||||
const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
|
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||||
{
|
{
|
||||||
billToAccountNumber: "87291",
|
billToAccountNumber: "87291",
|
||||||
|
|
@ -187,32 +178,29 @@ export default {
|
||||||
serviceLocationCity: store.getters.order.serviceLocation.city,
|
serviceLocationCity: store.getters.order.serviceLocation.city,
|
||||||
serviceLocationState: store.getters.order.serviceLocation.state,
|
serviceLocationState: store.getters.order.serviceLocation.state,
|
||||||
serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
|
serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
|
||||||
pricedAvailableLineItems: availableLineItems,
|
pricedLineItems: pricedLineItemsToTax,
|
||||||
},
|
},
|
||||||
"payment-method",
|
"payment-method",
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
// Match all available line items to the line items as they are in the store
|
// Match all line items to the line items as they are in the store
|
||||||
// and rebuild the original structure.
|
// and rebuild the original structure.
|
||||||
const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
|
const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
|
||||||
availableLineItems,
|
const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
|
||||||
lineItemsFromStore
|
|
||||||
);
|
|
||||||
|
|
||||||
// Call the "next" function to complete the transition to this page.
|
// Call the "next" function to complete the transition to this page.
|
||||||
next((vm) => {
|
next((vm) => {
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
vm.setCmsContent(resultMap.cmsContent);
|
||||||
vm.availableLineItems = taxedAvailableLineItems;
|
vm.availableVaps = taxedVaps;
|
||||||
vm.lineItems = lineItems;
|
vm.lineItems = lineItems;
|
||||||
|
|
||||||
vm.updateFooterButtonText(vm.customCtaCopy);
|
vm.updateFooterButtonText(vm.customCtaCopy);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
lineItems: [],
|
lineItems: [],
|
||||||
availableLineItems: [],
|
availableVaps: [],
|
||||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||||
inactivePromos: this.getInactivePromosFromStore(),
|
inactivePromos: this.getInactivePromosFromStore(),
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2180,13 +2180,13 @@ export const actions = {
|
||||||
serviceLocationCity,
|
serviceLocationCity,
|
||||||
serviceLocationState,
|
serviceLocationState,
|
||||||
serviceLocationZipCode,
|
serviceLocationZipCode,
|
||||||
pricedAvailableLineItems,
|
pricedLineItems,
|
||||||
},
|
},
|
||||||
pageNameToLog,
|
pageNameToLog,
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
const flattenedLineItemsWithChildParts =
|
const flattenedLineItemsWithChildParts =
|
||||||
getFlattenedArrayOfLineItemsWithChildParts(pricedAvailableLineItems);
|
getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems);
|
||||||
|
|
||||||
const lineItemsWithOnlyPriceInfo = flattenedLineItemsWithChildParts.map((lineItem) => ({
|
const lineItemsWithOnlyPriceInfo = flattenedLineItemsWithChildParts.map((lineItem) => ({
|
||||||
partNumber: lineItem.partNumber,
|
partNumber: lineItem.partNumber,
|
||||||
|
|
@ -2235,12 +2235,9 @@ export const actions = {
|
||||||
|
|
||||||
context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
|
context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
|
||||||
|
|
||||||
pricedAvailableLineItems = addTaxesToPricedLineItems(
|
pricedLineItems = addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems);
|
||||||
pricedAvailableLineItems,
|
|
||||||
response.data.taxedLineItems
|
|
||||||
);
|
|
||||||
|
|
||||||
return pricedAvailableLineItems;
|
return pricedLineItems;
|
||||||
},
|
},
|
||||||
|
|
||||||
// The <addableVaps> parameter is an array of ALL available front wipers and rain defense
|
// The <addableVaps> parameter is an array of ALL available front wipers and rain defense
|
||||||
|
|
@ -2610,7 +2607,7 @@ function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
|
||||||
return pricedLineItems;
|
return pricedLineItems;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, storeLineItems) {
|
export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItems) {
|
||||||
// clone the lineItems array because what we're passing in is referencing the store directly
|
// clone the lineItems array because what we're passing in is referencing the store directly
|
||||||
const lineItems = deepClone(storeLineItems);
|
const lineItems = deepClone(storeLineItems);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue