WIP
This commit is contained in:
parent
6085cd1b13
commit
2b98b9ab2c
6 changed files with 103 additions and 47 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue