This commit is contained in:
Bryan Mauger 2023-09-11 17:08:14 -04:00
parent 6085cd1b13
commit 2b98b9ab2c
6 changed files with 103 additions and 47 deletions

View file

@ -12,17 +12,18 @@
</div>
<div class="price-table">
<div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
<textBlock :cmsWidgetName="packageNameWidget" /><span>{{packagePrice}}</span>
{{listOfVaps}}
<textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
</div>
<div class="vaps">
<span>Wiper blades</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
<div class="vaps" v-for="(lineItem, i) in cartLineItems" :key="i">
<span>{{ lineItem.name }}</span>
<span><a href="#">Remove</a></span>
<span v-if="!lineItem.isPartOfPackage">{{ lineItem.price }}</span>
</div>
<div class="vaps">
<span>Rain defense</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
<div v-if="hasRecycleLineItem">
<span>{{ recycleLabel }}</span
><span>{{ recycleFee }}</span>
</div>
<div v-if="hasRecycleLineItem"><span>{{recycleLabel}}</span><span>{{recycleFee}}</span></div>
<div class="service-type"><span>Mobile service</span><span>$10</span></div>
<!-- Sub total, sales tax, total columns -->
<div class="sub-total"><span>Subtotal</span><span>$320</span></div>
<div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
<div class="amount-due"><span>Amount due</span><span>$321</span></div>
@ -51,12 +52,13 @@ export default {
headerCmsWidgetName: String,
servicePackageOptionsCmsName: String,
damage: Object,
lineItems: Object,
storeLineItems: Object,
availableLineItems: Object,
},
data() {
return {
isActive: false,
availableVaps: [],
//availableVaps: [], TO DO Do we need this?
packageWithVAPS: false,
// packageLevel: "",
};
@ -66,8 +68,9 @@ export default {
this.isActive = !this.isActive;
},
initializeComponent(apiResponses) {
const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
this.availableVaps = vapsFromApi;
//TO DO Do we need this?
// const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
// this.availableVaps = vapsFromApi;
},
getPackagePriceString(packageName) {
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
@ -95,6 +98,7 @@ export default {
return price;
},
//START HERE
getVapsLineItemsForSelectedPackage(packageName) {
const packageContentTypes = getPackageContents(
this.glassToReplace,
@ -110,7 +114,7 @@ export default {
...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
);
});
console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
return vapsLineItemsForSelectedPackage;
},
},
@ -129,6 +133,7 @@ export default {
(entry) => entry.Name === this.packageLevel
);
console.log("WidgetName", currentPackage);
return currentPackage.SubWidgetName;
},
packageLevel() {
@ -148,11 +153,52 @@ export default {
return packagePriceString;
// return (packagePriceString.length > 0) ? packagePriceString : "Test String";
},
listOfVaps() {
console.log("VAPS:", this.vaps);
const vaps = this.getVapsLineItemsForSelectedPackage(packageNames.TIER_ONE);
console.log("VAPS 2", vaps);
return vaps;
packageLineItems() {
return this.getVapsLineItemsForSelectedPackage(this.packageLevel);
},
cartLineItems() {
const cartLineItems = [];
console.log("Package VAPS", this.packageLineItems);
console.log("available line items", this.availableLineItems);
this.availableLineItems?.forEach((item) => {
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
const indexFound = this.packageLineItems.findIndex((packageLineItem) => {
return packageLineItem.partType === item.partType;
});
const cartLineItem = {
name: item.partType,
price: "$" + parseFloat(price).toFixed(2),
isPartOfPackage: indexFound > -1 ? true : false
};
cartLineItems.push(cartLineItem);
});
//return vaps;
// return [
// {
// name: "Front wiper blades",
// price: "$10",
// isPartOfPackage: false,
// },
// {
// name: "Rear wiper blades",
// price: "$15",
// isPartOfPackage: false,
// },
// {
// name: "Rain Defense",
// price: "$20",
// isPartOfPackage: false,
// },
// {
// name: "Mobile service",
// price: "$50",
// isPartOfPackage: false,
// },
// ];
console.log("CartLineItems",cartLineItems);
return cartLineItems;
},
glassToReplace() {
return this.damage.glassToReplace;
@ -161,14 +207,7 @@ export default {
return this.damage.isRepair;
},
vaps() {
return this.lineItems?.vaps;
},
availableLineItems() {
return [
...(this.lineItems?.glassParts ?? []),
...(this.lineItems?.supportingItems ?? []),
...this.availableVaps,
];
return this.storeLineItems?.vaps;
},
recycleLabel() {
return "Recycling";
@ -177,11 +216,13 @@ export default {
return "$35.00";
},
hasRecycleLineItem() {
if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
return true;
} else {
return false;
}
//TO DO
// if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
// return true;
// } else {
// return false;
// }
return true;
},
nullSafeAvailableLineItems() {
return this.availableLineItems ?? [];
@ -227,9 +268,23 @@ export default {
color: #ffffff;
}
}
.package-type,
.service-type,
.vaps {
background-color: #f5f5f5;
padding-left: 2.5rem;
align-items: center;
span {
display: flex;
width: 33.33333%;
&:nth-child(2) {
justify-content: flex-end;
}
&:last-child {
justify-content: flex-end;
}
}
}
.package-type,
.service-type {
//background-color: #f5f5f5;
align-items: center;
}
@ -248,12 +303,6 @@ export default {
margin-top: 0;
padding: 0;
}
&.packageWithVAPS {
~ .vaps {
background-color: #f5f5f5;
padding-left: 2.5rem;
}
}
}
}
.vin-toggle {
@ -275,7 +324,7 @@ export default {
transform: rotate(180deg);
}
&.active + .price-table {
max-height: 400px;
max-height: 450px;
transition: all 350ms ease-in;
overflow: hidden;
}

View file

@ -8,10 +8,11 @@ export function containsLineItemWithPartType(typeToFind, itemsToSearch) {
}
export function findLineItemsWithPartType(typeToFind, itemsToSearch) {
//console.log("typeToFind: ", typeToFind, " / itemsToSearch: ", itemsToSearch);
const partTypeMatches = itemsToSearch?.filter(
(lineItem) => lineItem.partType.toUpperCase() === typeToFind.toUpperCase()
);
//console.log(partTypeMatches);
return partTypeMatches;
}

View file

@ -15,7 +15,8 @@
<div>
<cart
:damage="damageInfo"
:lineItems="lineItems"
:storeLineItems="storeLineItems"
:availableLineItems="availableLineItems"
servicePackageOptionsCmsName="ServicePackageTitle" />
<vehicleReview
@ -256,7 +257,7 @@ export default {
damageInfo() {
return this.$store.getters.damage;
},
lineItems() {
storeLineItems() {
return this.$store.getters.lineItems;
},
serviceLocationInfo() {

View file

@ -112,7 +112,7 @@ export default {
...resultMap.wipers,
...clonedGlassParts,
];
console.log("Available line items:", availableLineItems);
const pricingResults = await baseMixin.methods.dispatchStoreAction(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
@ -120,7 +120,7 @@ export default {
},
false
);
console.log("Pricing results:", pricingResults);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);

View file

@ -89,7 +89,7 @@ export default {
buttonAuxillaryCopy: this.getPackagePriceString(answer.Name),
buttonFooterCopy: this.getFooterTextFromCms(answer.SubWidgetName),
}));
console.log("avialable packages is", modifiedAnswers)
console.log("avialable packages is", modifiedAnswers);
return modifiedAnswers;
},
isRecalibrationOnOrder() {

View file

@ -94,7 +94,12 @@ export default {
lineItem.childParts
);
}
console.log("step two, lineItem name: ", lineItem.partNumber, " / totalPrice: ", totalPrice);
console.log(
"step two, lineItem name: ",
lineItem.partNumber,
" / totalPrice: ",
totalPrice
);
});
console.log("step three", totalPrice);
return totalPrice;