WIP

src/fmg-components/cart/cart.vue

@@ -12,17 +12,18 @@
             </div>
             <div class="price-table">
                 <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
-                    <textBlock :cmsWidgetName="packageNameWidget" /><span>{{packagePrice}}</span>
+                    <textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
-                    {{listOfVaps}}
                 </div>
-                <div class="vaps">
+                <div class="vaps" v-for="(lineItem, i) in cartLineItems" :key="i">
-                    <span>Wiper blades</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
+                    <span>{{ lineItem.name }}</span>
+                    <span><a href="#">Remove</a></span>
+                    <span v-if="!lineItem.isPartOfPackage">{{ lineItem.price }}</span>
                 </div>
-                <div class="vaps">
+                <div v-if="hasRecycleLineItem">
-                    <span>Rain defense</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
+                    <span>{{ recycleLabel }}</span
+                    ><span>{{ recycleFee }}</span>
                 </div>
-                <div v-if="hasRecycleLineItem"><span>{{recycleLabel}}</span><span>{{recycleFee}}</span></div>
+                <!-- Sub total, sales tax, total columns -->
-                <div class="service-type"><span>Mobile service</span><span>$10</span></div>
                 <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];
+            //TO DO Do we need this?
-            this.availableVaps = vapsFromApi;
+            // 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() {
+        packageLineItems() {
-            console.log("VAPS:", this.vaps);
+            return this.getVapsLineItemsForSelectedPackage(this.packageLevel);
-            const vaps = this.getVapsLineItemsForSelectedPackage(packageNames.TIER_ONE);
+        },
-            console.log("VAPS 2", vaps);
+        cartLineItems() {
-            return vaps;
+            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;
+            return this.storeLineItems?.vaps;
-        },
-        availableLineItems() {
-            return [
-                ...(this.lineItems?.glassParts ?? []),
-                ...(this.lineItems?.supportingItems ?? []),
-                ...this.availableVaps,
-            ];
         },
         recycleLabel() {
             return "Recycling";
@@ -177,11 +216,13 @@ export default {
             return "$35.00";
         },
         hasRecycleLineItem() {
-            if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
+            //TO DO
-                return true;
+            // if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
-            } else {
+            //     return true;
-                return false;
+            // } 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;
         }

src/helpers/service-package-helper.js

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

src/layouts/payment-method/payment-method.vue

@@ -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() {

src/layouts/quote/quote.vue

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

src/layouts/quote/service-package-question/service-package-question.vue

@@ -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() {

src/mixins/base-mixin.js

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