From afb2cbae739386bac3bf446411a53e7117f91846 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Wed, 8 Nov 2023 16:31:25 -0500 Subject: [PATCH] CSR-1384: refactor updates from tech review --- src/fmg-components/cart/cart.spec.js | 28 +++++----- src/fmg-components/cart/cart.vue | 12 ++++- .../add-vaps-modal-buttons.vue | 8 +-- src/layouts/payment-method/payment-method.vue | 54 ++++++++----------- src/store/index.js | 13 ++--- 5 files changed, 55 insertions(+), 60 deletions(-) diff --git a/src/fmg-components/cart/cart.spec.js b/src/fmg-components/cart/cart.spec.js index ae84083e6..bd0a2b096 100644 --- a/src/fmg-components/cart/cart.spec.js +++ b/src/fmg-components/cart/cart.spec.js @@ -37,13 +37,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -89,13 +89,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -132,13 +132,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -189,13 +189,13 @@ describe("cart.vue", () => { // promos: [], // }; - // const availableLineItems = []; + // const availableVaps = []; // // Act // const { wrapper } = setupMocks({ // props: { // modelValue: lineItems, - // availableLineItems: availableLineItems, + // availableVaps: availableVaps, // }, // }); @@ -234,13 +234,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -277,13 +277,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); @@ -321,13 +321,13 @@ describe("cart.vue", () => { promos: [], }; - const availableLineItems = []; + const availableVaps = []; // Act const { wrapper } = setupMocks({ props: { modelValue: lineItems, - availableLineItems: availableLineItems, + availableVaps: availableVaps, }, }); diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index ca784edd4..e34e9a4c4 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -121,7 +121,7 @@ export default { modelValue: Object, damage: Object, servicePackageOptionsCmsName: String, - availableLineItems: Object, + availableVaps: Object, }, data() { return { @@ -189,6 +189,16 @@ export default { }, }, computed: { + availableLineItems() { + if (!this.lineItems || this.lineItems.length < 1) { + return []; + } + return [ + ...this.lineItems.glassParts, + ...this.lineItems.supportingItems, + ...this.availableVaps, + ]; + }, cartItems: { get: function () { let cartItems = []; diff --git a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue index bb378c619..3eaf6a42e 100644 --- a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue +++ b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue @@ -76,7 +76,7 @@ export default { name: "add-vaps-modal-buttons", props: { vapsTilesCmsName: String, - availableLineItems: Object, + availableVaps: Object, modelValue: Object, }, data() { @@ -198,7 +198,7 @@ export default { return modelValue; }, rainDefenseModal() { - const lineItem = this.availableLineItems.find((item) => { + const lineItem = this.availableVaps.find((item) => { return item.partType === partTypeStrings.RAIN_DEFENSE; }); if (lineItem) @@ -209,10 +209,10 @@ export default { }, wipersModal() { // 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); }); - const rearWiperLineItems = this.availableLineItems.filter((item) => { + const rearWiperLineItems = this.availableVaps.filter((item) => { return item.partType.includes(partTypeStrings.REAR_WIPER); }); let wipersModal; diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 9a788bd70..a7313ddc7 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -23,7 +23,7 @@ @@ -42,7 +42,7 @@ @@ -90,13 +90,14 @@ import { } from "@/helpers/promotions-helper"; import { queryStrings } from "@/constants/query-strings"; import { getQuerystringParameter } from "@/helpers/querystring-helper"; +import { deepClone } from "@/helpers/object-helper"; import { Form } from "vee-validate"; import { defineRule } from "vee-validate"; import { required } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; import { AppointmentTypeStrings } from "@/constants/schedule-constants"; -import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store"; +import { mapTaxedLineItemsToStoreFormat } from "../../store"; defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -118,12 +119,6 @@ export default { "payment-method" ); - const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging( - storeActions.GET_SUPPORTING_ITEMS, - null, - "payment-method" - ); - const promiseResultMap = [ { resultKey: "cmsContent", @@ -137,29 +132,25 @@ export default { resultKey: "rainDefense", promise: rainDefensePromise, }, - { - resultKey: "supportingItems", - promise: supportingItemsPromise, - }, ]; 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 ?? []; - - let availableLineItems = [ + const lineItemsToTax = [ resultMap.rainDefense, - ...resultMap.supportingItems, + ...supportingItems, ...resultMap.wipers, ...glassParts, ]; + const availableVaps = [resultMap.rainDefense, ...resultMap.wipers]; - const lineItemsFromStore = store.getters.order.lineItems; - - await baseMixin.methods.dispatchStoreActionWithLogging( + const pricedLineItemsToTax = await baseMixin.methods.dispatchStoreActionWithLogging( storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, { - availableLineItems: availableLineItems, + availableLineItems: lineItemsToTax, }, "payment-method", false @@ -171,14 +162,14 @@ export default { const { validatePromoResponse, revalidatePromoResponse } = await revalidatePromosAndValidateNewPromo( promoCodeFromQueryString, - availableLineItems, + pricedLineItemsToTax, "payment-method" ); - availableLineItems.push(...(validatePromoResponse?.orderPromos ?? [])); + pricedLineItemsToTax.push(...(validatePromoResponse?.orderPromos ?? [])); // End of promo logic - const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging( + const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging( storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA, { billToAccountNumber: "87291", @@ -187,32 +178,29 @@ export default { serviceLocationCity: store.getters.order.serviceLocation.city, serviceLocationState: store.getters.order.serviceLocation.state, serviceLocationZipCode: store.getters.order.serviceLocation.zipCode, - pricedAvailableLineItems: availableLineItems, + pricedLineItems: pricedLineItemsToTax, }, "payment-method", 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. - const lineItems = mapTaxedAvailableLineItemsToStoreFormat( - availableLineItems, - lineItemsFromStore - ); + const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore); + const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps); // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.availableLineItems = taxedAvailableLineItems; + vm.availableVaps = taxedVaps; vm.lineItems = lineItems; - vm.updateFooterButtonText(vm.customCtaCopy); }); }, data() { return { lineItems: [], - availableLineItems: [], + availableVaps: [], paymentMethodInternalModel: this.getPaymentMethodFromStore(), inactivePromos: this.getInactivePromosFromStore(), }; diff --git a/src/store/index.js b/src/store/index.js index e2915a1af..5251950c1 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2180,13 +2180,13 @@ export const actions = { serviceLocationCity, serviceLocationState, serviceLocationZipCode, - pricedAvailableLineItems, + pricedLineItems, }, pageNameToLog, } ) { const flattenedLineItemsWithChildParts = - getFlattenedArrayOfLineItemsWithChildParts(pricedAvailableLineItems); + getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems); const lineItemsWithOnlyPriceInfo = flattenedLineItemsWithChildParts.map((lineItem) => ({ partNumber: lineItem.partNumber, @@ -2235,12 +2235,9 @@ export const actions = { context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData); - pricedAvailableLineItems = addTaxesToPricedLineItems( - pricedAvailableLineItems, - response.data.taxedLineItems - ); + pricedLineItems = addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems); - return pricedAvailableLineItems; + return pricedLineItems; }, // The parameter is an array of ALL available front wipers and rain defense @@ -2610,7 +2607,7 @@ function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) { 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 const lineItems = deepClone(storeLineItems);