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

Merge pull request #1504 from Safelite/feature/CSR-1384-modals-for-add-vaps

Browse source 
CSR-1384: refactor updates from tech review
This commit is contained in:
Mark Harris 2023-11-09 05:14:09 -05:00 committed by GitHub
commit db348fe2b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 106 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/fmg-components/cart/cart.spec.js
View file

@ -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,
}, },
}); });

12
src/fmg-components/cart/cart.vue
View file

@ -127,7 +127,7 @@ export default {
modelValue: Object, modelValue: Object,
damage: Object, damage: Object,
servicePackageOptionsCmsName: String, servicePackageOptionsCmsName: String,
availableLineItems: Object, availableVaps: Object,
allowItemRemoval: Boolean, allowItemRemoval: Boolean,
recyclingModalCmsWidgetName: String, recyclingModalCmsWidgetName: String,
}, },
@ -200,6 +200,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 = [];

86
src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
View file

@ -76,13 +76,12 @@ 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() {
return { return {
addVapsButton: addVapsButton, addVapsButton: addVapsButton,
wipersOffered: null,
isModalOpened: false, isModalOpened: false,
selectedWipers: this.getSelectedWipers(), selectedWipers: this.getSelectedWipers(),
}; };
@ -206,7 +205,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)
@ -217,10 +216,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;
@ -249,20 +248,38 @@ export default {
answersCmsData() { answersCmsData() {
return this.getCmsContent(this.vapsTilesCmsName, "Answers"); return this.getCmsContent(this.vapsTilesCmsName, "Answers");
}, },
rainDefenseInCart() {
return this.currentCartItems.vaps?.some((vap) => {
return vap?.partType === partTypeStrings.RAIN_DEFENSE;
});
},
frontWipersInCart() {
return this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
});
},
rearWipersInCart() {
return this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
});
},
wipersOffered() {
let result;
if (!this.frontWipersInCart) {
if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
result = wipersOfferedStrings.BOTH;
} else {
result = wipersOfferedStrings.FRONT;
}
} else if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
result = wipersOfferedStrings.REAR;
}
return result;
},
buttonsToDisplay() { buttonsToDisplay() {
const buttons = []; const buttons = [];
if (!this.answersCmsData) return buttons; if (!this.answersCmsData) return buttons;
const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => {
return vap?.partType === partTypeStrings.RAIN_DEFENSE;
});
const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
});
const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
});
const getAnswer = (name, answers) => { const getAnswer = (name, answers) => {
const answerIndex = answers.findIndex((answer) => { const answerIndex = answers.findIndex((answer) => {
return answer.Name === name; return answer.Name === name;
@ -270,7 +287,7 @@ export default {
return answers[answerIndex]; return answers[answerIndex];
}; };
if (!rainDefenseInCart) { if (!this.rainDefenseInCart) {
// NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON // NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
const modalData = getAnswer("RainDefenseModal", this.answersCmsData); const modalData = getAnswer("RainDefenseModal", this.answersCmsData);
modalData.SubText = "+$" + this.rainDefenseModal?.listPrice; modalData.SubText = "+$" + this.rainDefenseModal?.listPrice;
@ -278,27 +295,26 @@ export default {
} }
const modalData = getAnswer("WipersModal", this.answersCmsData); const modalData = getAnswer("WipersModal", this.answersCmsData);
if (!frontWipersInCart) { if (this.wipersOffered === wipersOfferedStrings.BOTH) {
if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) { // NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
// NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON const prices = [
const prices = [ this.wipersModal?.totalFrontPrice,
this.wipersModal?.totalFrontPrice, this.wipersModal?.totalRearPrice,
this.wipersModal?.totalRearPrice, ];
]; prices.sort((a, b) => a - b);
prices.sort((a, b) => a - b); modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1]; buttons.push(modalData);
this.updateWipersOffered(wipersOfferedStrings.BOTH); }
buttons.push(modalData);
} else { if (this.wipersOffered === wipersOfferedStrings.FRONT) {
// NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice; modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
this.updateWipersOffered(wipersOfferedStrings.FRONT); buttons.push(modalData);
buttons.push(modalData); }
}
} else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) { if (this.wipersOffered === wipersOfferedStrings.REAR) {
// NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON // NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
modalData.SubText = "+$" + this.wipersModal?.totalRearPrice; modalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
this.updateWipersOffered(wipersOfferedStrings.REAR);
buttons.push(modalData); buttons.push(modalData);
} }

57
src/layouts/payment-method/payment-method.vue
View file

@ -23,7 +23,7 @@
<cart <cart
:damage="damageInfo" :damage="damageInfo"
:availableLineItems="availableLineItems" :availableVaps="availableVaps"
:allowItemRemoval="true" :allowItemRemoval="true"
v-model="lineItems" v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle" servicePackageOptionsCmsName="ServicePackageTitle"
@ -44,7 +44,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" />
@ -93,13 +93,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));
@ -121,12 +122,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",
@ -140,29 +135,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
@ -174,16 +165,16 @@ export default {
const { validatePromoResponse, revalidatePromoResponse } = const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateNewPromo( await revalidatePromosAndValidateNewPromo(
promoCodeFromQueryString, promoCodeFromQueryString,
availableLineItems, pricedLineItemsToTax,
"payment-method" "payment-method"
); );
const newValidatedPromos = validatePromoResponse?.orderPromos ?? []; const newValidatedPromos = validatePromoResponse?.orderPromos ?? [];
availableLineItems.push(...newValidatedPromos); pricedLineItemsToTax.push(...newValidatedPromos);
// 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",
@ -192,24 +183,23 @@ 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
);
// Add items that were not in the store yet but added via query string promo validation // Add items that were not in the store yet but added via query string promo validation
lineItems.promos = lineItems.promos ?? []; lineItems.promos = lineItems.promos ?? [];
lineItems.promos.push(...newValidatedPromos); lineItems.promos.push(...newValidatedPromos);
const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos( const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos(
newValidatedPromos, newValidatedPromos,
availableLineItems, taxedVaps,
lineItems lineItems
); );
lineItems.vaps.push(...vapsToAddToCart); lineItems.vaps.push(...vapsToAddToCart);
@ -217,16 +207,15 @@ export default {
// 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(),
}; };

7
src/layouts/payment/payment.vue
View file

@ -188,7 +188,7 @@ import { applicationConfig } from "@/constants/application-config";
import { paymentMethods } from "@/constants/payment-method-constants"; import { paymentMethods } from "@/constants/payment-method-constants";
import { AppointmentTypeStrings } from "@/constants/schedule-constants"; import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store"; import { mapTaxedLineItemsToStoreFormat } from "../../store";
import { import {
revalidatePromosAndValidateNewPromo, revalidatePromosAndValidateNewPromo,
getAddableVapsFromAvailableLineItems, getAddableVapsFromAvailableLineItems,
@ -348,10 +348,7 @@ export default {
// Match all available line items to the line items as they are in the store // Match all available 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(availableLineItems, lineItemsFromStore);
availableLineItems,
lineItemsFromStore
);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next(async (vm) => { next(async (vm) => {

13
src/store/index.js
View file

@ -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);