Fixing tests

src/constants/cart-item-type.js

@@ -0,0 +1,11 @@
+const cartItemType = Object.freeze({
+    // FRONT_WIPERS: 'FRONT WIPERS',
+    // REAR_WIPERS: 'REAR WIPERS',
+    // RAIN_DEFENSE: 'RAIN DEFENSE',
+    RECYCLE_FEE: 'RECYCLE FEE',
+    // REPLACE_FEE: 'REPLACE FEE',
+    MOBILE_FEE: 'MOBILE FEE',
+    VAP: 'VAP'
+});
+
+export default cartItemType;

src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap

@@ -2,6 +2,11 @@
 
 exports[`cart-dropdown component initial data rendered as expected 1`] = `
 Object {
+  "cartItemType": Object {
+    "MOBILE_FEE": "MOBILE FEE",
+    "RECYCLE_FEE": "RECYCLE FEE",
+    "VAP": "VAP",
+  },
   "isExpanded": false,
   "widget": Object {
     "amountDue": "AmountDueTextWidget",

src/iss-components/cart-dropdown/cart-dropdown.spec.js

@@ -46,6 +46,14 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, propsData
     return { wrapper };
 }
 
+beforeEach(() => {
+    const store = useMainStore();
+    const defaultState = getDefaultState();
+    Object.keys(defaultState).forEach((key) => {
+        store[key] = defaultState[key];
+    });
+});
+
 describe('cart-dropdown component', () => {
     test('initial data rendered as expected', () => {
         // Arrange
@@ -433,13 +441,57 @@ describe('cart-dropdown component', () => {
             });
         });
         describe('subTotal', () => {
-            test('when not no comp and not itac, includes deductible price', () => {
+            const supportingItemPartNumber = 'supporter';
+            const glassPartNumber = 'glass part';
+            const otherPartNumber = 'other';
+            const vapPartNumber = 'vap';
+            const mobileFeePartNumber = 'mobile';
+            const supportingItems = [{ partNumber: supportingItemPartNumber }];
+            const glassParts = [{ partNumber: glassPartNumber }];
+            const otherParts = [{ partNumber: otherPartNumber }];
+            const vaps = [{ partNumber: vapPartNumber }];
+            const mobileFee = { partNumber: mobileFeePartNumber };
+            const includesPartNumber = (lineItems, partNumber) => lineItems.some((item) => item?.partNumber === partNumber);
+            const deductiblePrice = 100;
+            const supportingAndGlassAndOtherPrice = 30;
+            const feesAndVapsPrice = 50;
+            const allLineItemsPrice = 70;
+            getPriceOfLineItems.mockImplementation((lineItems) => {
+                const allPartNumbers = [
+                    supportingItemPartNumber,
+                    glassPartNumber,
+                    otherPartNumber,
+                    mobileFeePartNumber,
+                    vapPartNumber
+                ];
+                if (allPartNumbers.every((partNumber) => includesPartNumber(lineItems, partNumber))) {
+                    return allLineItemsPrice;
+                }
+                const supportingAndGlassAndOtherPartNumbers = [
+                    supportingItemPartNumber,
+                    glassPartNumber,
+                    otherPartNumber
+                ];
+                if (supportingAndGlassAndOtherPartNumbers.every((partNumber) => includesPartNumber(lineItems, partNumber))) {
+                    return supportingAndGlassAndOtherPrice;
+                }
+                if (includesPartNumber(lineItems, mobileFeePartNumber) && includesPartNumber(lineItems, vapPartNumber)) {
+                    return feesAndVapsPrice;
+                }
+                return 1;
+            });
+            const lineItems = {
+                supportingItems,
+                glassParts,
+                otherParts,
+                vaps,
+                mobileFee
+            };
+            test('when not no comp and not itac, includes deductible price plus fee and vap price', () => {
                 // Arrange
-                const deductiblePrice = 872;
-                const baseServicePrice = 43;
-                getPriceOfLineItems.mockImplementation(() => baseServicePrice);
                 const storeData = {
                     order: {
+                        lineItems,
                         policy: {
                             noCoverage: false,
                             isITAC: false
@@ -448,20 +500,19 @@ describe('cart-dropdown component', () => {
                     }
                 };
                 const { wrapper } = getMountedComponent(storeData);
+                const expected = deductiblePrice + feesAndVapsPrice;
 
                 // Act
                 const result = wrapper.vm.subTotal;
 
                 // Assert
-                expect(result).toBe(deductiblePrice);
+                expect(result).toBe(expected);
             });
-            test('when no comp, includes base service price', () => {
+            test('when no comp, returns all line items price', () => {
                 // Arrange
-                const deductiblePrice = 872;
-                const baseServicePrice = 43;
-                getPriceOfLineItems.mockImplementation(() => baseServicePrice);
                 const storeData = {
                     order: {
+                        lineItems,
                         policy: {
                             noCoverage: true,
                             isITAC: false
@@ -470,20 +521,19 @@ describe('cart-dropdown component', () => {
                     }
                 };
                 const { wrapper } = getMountedComponent(storeData);
+                const expected = allLineItemsPrice;
 
                 // Act
                 const result = wrapper.vm.subTotal;
 
                 // Assert
-                expect(result).toBe(baseServicePrice);
+                expect(result).toBe(expected);
             });
-            test('when ITAC, includes base service price', () => {
+            test('when ITAC, returns all line items price', () => {
                 // Arrange
-                const deductiblePrice = 872;
-                const baseServicePrice = 43;
-                getPriceOfLineItems.mockImplementation(() => baseServicePrice);
                 const storeData = {
                     order: {
+                        lineItems,
                         policy: {
                             noCoverage: false,
                             isITAC: true
@@ -492,121 +542,28 @@ describe('cart-dropdown component', () => {
                     }
                 };
                 const { wrapper } = getMountedComponent(storeData);
+                const expected = allLineItemsPrice;
 
                 // Act
                 const result = wrapper.vm.subTotal;
 
                 // Assert
-                expect(result).toBe(baseServicePrice);
+                expect(result).toBe(expected);
-            });
-            test('when nonServicePackageCartItems non empty, sums appropriately', () => {
-                // Arrange
-                const deductiblePrice = 0;
-                const subTotal = 34;
-                getPriceOfLineItems.mockImplementation(() => subTotal);
-                const storeData = {
-                    order: {
-                        policy: {
-                            noCoverage: false,
-                            isITAC: false
-                        },
-                        currentDeductible: deductiblePrice,
-                        lineItems: {
-                            vaps: [
-                                {
-                                    partType: partTypeStrings.FRONT_WIPER
-                                },
-                                {
-                                    partType: partTypeStrings.REAR_WIPER
-                                }
-                            ]
-                        }
-                    }
-                };
-                const { wrapper } = getMountedComponent(storeData);
-                const expectedPrice = 68;
-
-                // Act
-                const result = wrapper.vm.subTotal;
-
-                // Assert
-                expect(result).toBe(expectedPrice);
-            });
-            test('when deductible included, sums all prices appropriately', () => {
-                // Arrange
-                const deductiblePrice = 54;
-                const subTotal = 34;
-                getPriceOfLineItems.mockImplementation(() => subTotal);
-                const storeData = {
-                    order: {
-                        policy: {
-                            noCoverage: false,
-                            isITAC: false
-                        },
-                        currentDeductible: deductiblePrice,
-                        lineItems: {
-                            vaps: [
-                                {
-                                    partType: partTypeStrings.FRONT_WIPER
-                                },
-                                {
-                                    partType: partTypeStrings.REAR_WIPER
-                                }
-                            ]
-                        }
-                    }
-                };
-                const { wrapper } = getMountedComponent(storeData);
-                const expectedPrice = 122;
-
-                // Act
-                const result = wrapper.vm.subTotal;
-
-                // Assert
-                expect(result).toBe(expectedPrice);
-            });
-            test('when base service price included, sums all prices appropriately', () => {
-                // Arrange
-                const deductiblePrice = 54;
-                const subTotal = 34;
-                getPriceOfLineItems.mockImplementation(() => subTotal);
-                const storeData = {
-                    order: {
-                        policy: {
-                            noCoverage: true,
-                            isITAC: false
-                        },
-                        currentDeductible: deductiblePrice,
-                        lineItems: {
-                            vaps: [
-                                {
-                                    partType: partTypeStrings.FRONT_WIPER
-                                },
-                                {
-                                    partType: partTypeStrings.REAR_WIPER
-                                }
-                            ]
-                        }
-                    }
-                };
-                const { wrapper } = getMountedComponent(storeData);
-                const expectedPrice = 102;
-
-                // Act
-                const result = wrapper.vm.subTotal;
-
-                // Assert
-                expect(result).toBe(expectedPrice);
             });
         });
         describe('salesTax', () => {
             test('salesTax is treated as 0 when line items are null', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = {
-                storeData.order.lineItems.glassParts = null;
+                    order: {
-                storeData.order.lineItems.otherParts = null;
+                        lineItems: {
-                storeData.order.lineItems.supportingItems = null;
+                            glassParts: null,
-                storeData.order.lineItems.vaps = null;
+                            otherParts: null,
+                            supportingItems: null,
+                            vaps: null
+                        }
+                    }
+                };
 
                 const { wrapper } = getMountedComponent(storeData);
 
@@ -619,20 +576,24 @@ describe('cart-dropdown component', () => {
 
             test("salesTax is treated as 0 when null or undefined is set as the line item's sales tax.", () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = {
-                storeData.order.lineItems.glassParts = [
+                    order: {
+                        lineItems: {
+                            glassParts: [
                                 { partType: 'mock', salesTax: null },
                                 { partType: 'mock', salesTax: undefined }
-                ];
+                            ],
-                storeData.order.lineItems.supportingItems = [
+                            supportingItems: [
                                 { partType: 'mock', salesTax: null },
                                 { partType: 'mock', salesTax: undefined }
-                ];
+                            ],
-                storeData.order.lineItems.vaps = [
+                            vaps: [
                                 { partType: 'mock', salesTax: null },
                                 { partType: 'mock', salesTax: undefined }
-                ];
+                            ]
-
+                        }
+                    }
+                };
                 const { wrapper } = getMountedComponent(storeData);
 
                 // Act
@@ -641,19 +602,29 @@ describe('cart-dropdown component', () => {
                 // Assert
                 expect(result).toBe(0);
             });
-
             test('Returns 0 as sales tax when coverage is unverified and order does not contain vaps.', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = {
-                storeData.order.lineItems.glassParts = [
+                    order: {
-                    { partType: 'mock', salesTax: 10 }
+                        lineItems: {
-                ];
+                            glassParts: [{ partType: 'mock', salesTax: 10 }],
-                storeData.order.lineItems.supportingItems = [
+                            supportingItems: [
-                    { partNumber: partNumberStrings.RECYCLE_FEE, partType: 'mock', salesTax: 10, sellingPrice: 39.99 }
+                                {
-                ];
+                                    partNumber: partNumberStrings.RECYCLE_FEE,
-                storeData.order.lineItems.vaps = [];
+                                    partType: 'mock',
-                storeData.order.payment.insuranceCoverage.isVerified = false;
+                                    salesTax: 10,
-
+                                    sellingPrice: 39.99
+                                }
+                            ],
+                            vaps: []
+                        },
+                        payment: {
+                            insuranceCoverage: {
+                                isVerified: false
+                            }
+                        }
+                    }
+                };
                 const { wrapper } = getMountedComponent(storeData);
 
                 // Act
@@ -665,7 +636,7 @@ describe('cart-dropdown component', () => {
 
             test('Returns sum of vaps sales tax when coverage is unverified and order has vaps.', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = useMainStore().$state;
                 storeData.order.lineItems.glassParts = [
                     { partType: 'mock', salesTax: 10 }
                 ];
@@ -686,7 +657,7 @@ describe('cart-dropdown component', () => {
 
             test('Returns Recycle Fee tax when coverage is Verified-Deductible, replace service, and no vaps.', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = useMainStore().$state;
                 storeData.order.currentDeductible = 250;
                 storeData.order.lineItems.glassParts = [
                     { partType: 'mock', salesTax: 10, sellingPrice: 150 }
@@ -708,7 +679,7 @@ describe('cart-dropdown component', () => {
 
             test('Returns sum of vaps + recycle fee sales tax when Verified-Deductible, replace service, and has vaps.', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = useMainStore().$state;
                 storeData.order.currentDeductible = 250;
                 storeData.order.lineItems.glassParts = [
                     { partType: 'mock', salesTax: 10, sellingPrice: 100 }
@@ -737,7 +708,7 @@ describe('cart-dropdown component', () => {
 
             test('Returns sum of sales tax when Verified-ITAC.', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = useMainStore().$state;
                 storeData.order.currentDeductible = 0;
                 storeData.order.lineItems.glassParts = [
                     { partType: 'mock', salesTax: 10, sellingPrice: 100 }
@@ -765,7 +736,7 @@ describe('cart-dropdown component', () => {
 
             test('Returns sum of sales tax when Verified-NoComp.', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = useMainStore().$state;
                 storeData.order.currentDeductible = 0;
                 storeData.order.lineItems.glassParts = [
                     { partType: 'mock', salesTax: 10, sellingPrice: 100 }
@@ -792,18 +763,10 @@ describe('cart-dropdown component', () => {
             });
         });
         describe('availableLineItems', () => {
-            test('returns expected when glassParts null', async () => {
+            test('returns expected when all null', () => {
                 // Arrange
-                const storeData = {
+                const propsData = { availableVaps: null };
-                    order: {
+                const { wrapper } = getMountedComponent({}, {}, propsData);
-                        lineItems: {
-                            glassParts: null,
-                            supportingItems: []
-                        }
-                    }
-                };
-                const propsData = { availableVaps: [] };
-                const { wrapper } = getMountedComponent(storeData, {}, propsData);
 
                 // Act
                 const result = wrapper.vm.availableLineItems;
@@ -811,58 +774,106 @@ describe('cart-dropdown component', () => {
                 // Assert
                 expect(result).toStrictEqual([]);
             });
-            test('returns expected when supportingItems null', async () => {
+            test('returns expected when glassParts not null', async () => {
                 // Arrange
+                const glassParts = [{ partNumber: 'glass' }];
                 const storeData = {
                     order: {
-                        lineItems: {
+                        lineItems: { glassParts }
-                            glassParts: [],
-                            supportingItems: null
-                        }
                     }
                 };
-                const propsData = { availableVaps: [] };
+                const propsData = { availableVaps: null };
                 const { wrapper } = getMountedComponent(storeData, {}, propsData);
+                const expected = glassParts;
 
                 // Act
                 const result = wrapper.vm.availableLineItems;
 
                 // Assert
-                expect(result).toStrictEqual([]);
+                expect(result).toStrictEqual(expected);
+            });
+            test('returns expected when supportingItems not null', async () => {
+                // Arrange
+                const supportingItems = [{ partNumber: 'support' }];
+                const storeData = {
+                    order: {
+                        lineItems: { supportingItems }
+                    }
+                };
+                const propsData = { availableVaps: null };
+                const { wrapper } = getMountedComponent(storeData, {}, propsData);
+                const expected = supportingItems;
+
+                // Act
+                const result = wrapper.vm.availableLineItems;
+
+                // Assert
+                expect(result).toStrictEqual(expected);
+            });
+            test('returns expected when otherParts not null', () => {
+                // Arrange
+                const otherParts = [{ partNumber: 'other' }];
+                const storeData = {
+                    order: {
+                        lineItems: { otherParts }
+                    }
+                };
+                const propsData = { availableVaps: null };
+                const { wrapper } = getMountedComponent(storeData, {}, propsData);
+                const expected = otherParts;
+
+                // Act
+                const result = wrapper.vm.availableLineItems;
+
+                // Assert
+                expect(result).toStrictEqual(expected);
+            });
+            test('returns expected when mobileFee not null', () => {
+                // Arrange
+                const mobileFee = { partNumber: 'mobile' };
+                const storeData = {
+                    order: {
+                        lineItems: { mobileFee }
+                    }
+                };
+                const propsData = { availableVaps: null };
+                const { wrapper } = getMountedComponent(storeData, {}, propsData);
+                const expected = [mobileFee];
+
+                // Act
+                const result = wrapper.vm.availableLineItems;
+
+                // Assert
+                expect(result).toStrictEqual(expected);
             });
             test('returns expected when availableVaps null', async () => {
                 // Arrange
-                const storeData = {
+                const availableVaps = [{ partNumber: 'vaps1' }];
-                    order: {
+                const propsData = { availableVaps };
-                        lineItems: {
+                const { wrapper } = getMountedComponent({}, {}, propsData);
-                            glassParts: [],
+                const expected = availableVaps;
-                            supportingItems: []
-                        }
-                    }
-                };
-                const propsData = {
-                    availableVaps: undefined
-                };
-                const { wrapper } = getMountedComponent(storeData, {}, propsData);
 
                 // Act
                 const result = wrapper.vm.availableLineItems;
 
                 // Assert
-                expect(result).toStrictEqual([]);
+                expect(result).toStrictEqual(expected);
             });
-            test('returns expected when glassParts, supportingItems, and availableVaps have content', async () => {
+            test('returns expected when glassParts, supportingItems, otherParts, mobileFee, and availableVaps have content', async () => {
                 // Arrange
                 const part1 = { partType: 'apple' };
                 const part2 = { partType: 'banana' };
                 const part3 = { partType: 'orange' };
                 const part4 = { partType: 'grape' };
                 const part5 = { partType: 'raspberry' };
+                const mobileFee = { partType: 'mobile' };
                 const storeData = {
                     order: {
                         lineItems: {
                             glassParts: [part1],
-                            supportingItems: [part2, part3]
+                            supportingItems: [part2, part3],
+                            otherParts: [],
+                            mobileFee
                         }
                     }
                 };
@@ -870,13 +881,24 @@ describe('cart-dropdown component', () => {
                     availableVaps: [part4, part5]
                 };
                 const { wrapper } = getMountedComponent(storeData, {}, propsData);
-                const expected = [part1, part2, part3, part4, part5];
+                const sortByPartType = (a, b) => {
+                    const typeA = a.partType.toUpperCase();
+                    const typeB = b.partType.toUpperCase();
+                    if (typeA < typeB) {
+                        return -1;
+                    }
+                    if (typeA > typeB) {
+                        return 1;
+                    }
+                    return 0;
+                };
+                const expected = [part1, part2, part3, part4, part5, mobileFee];
 
                 // Act
                 const result = wrapper.vm.availableLineItems;
 
                 // Assert
-                expect(result).toStrictEqual(expected);
+                expect(result.sort(sortByPartType)).toStrictEqual(expected.sort(sortByPartType));
             });
         });
         describe('servicePackageCartItems', () => {
@@ -1616,10 +1638,10 @@ describe('cart-dropdown component', () => {
                 const rearPrice = 101;
                 const frontPrice = 9;
                 getPriceOfLineItems.mockImplementation((lineItems) => {
-                    if (lineItems.some((item) => item.partType === partTypeStrings.FRONT_WIPER)) {
+                    if (lineItems.some((item) => item?.partType === partTypeStrings.FRONT_WIPER)) {
                         return frontPrice;
                     }
-                    if (lineItems.some((item) => item.partType === partTypeStrings.REAR_WIPER)) {
+                    if (lineItems.some((item) => item?.partType === partTypeStrings.REAR_WIPER)) {
                         return rearPrice;
                     }
                     return 1;
@@ -1648,7 +1670,7 @@ describe('cart-dropdown component', () => {
                 // Arrange
                 const frontPrice = 9;
                 getPriceOfLineItems.mockImplementation((lineItems) => {
-                    if (lineItems.some((item) => item.partType === partTypeStrings.FRONT_WIPER)) {
+                    if (lineItems.some((item) => item?.partType === partTypeStrings.FRONT_WIPER)) {
                         return frontPrice;
                     }
                     return 1;
@@ -1677,10 +1699,15 @@ describe('cart-dropdown component', () => {
         describe('getDisplayed', () => {
             test('returns "Verifying coverage" when not no comp, not itac, and deductible null', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = {
-                storeData.order.policy.noCoverage = false;
+                    order: {
-                storeData.order.policy.isITAC = false;
+                        policy: {
-                storeData.order.currentDeductible = null;
+                            noCoverage: false,
+                            isITAC: false
+                        },
+                        currentDeductible: null
+                    }
+                };
 
                 const { wrapper } = getMountedComponent(storeData);
                 const amount = 123;
@@ -1693,10 +1720,15 @@ describe('cart-dropdown component', () => {
             });
             test('returns "Verifying coverage" when not no comp, not itac, and coverage status PENDING', () => {
                 // Arrange
-                const storeData = getDefaultState();
+                const storeData = {
-                storeData.order.policy.noCoverage = false;
+                    order: {
-                storeData.order.policy.isITAC = false;
+                        policy: {
-                storeData.order.currentDeductible = 321;
+                            noCoverage: false,
+                            isITAC: false
+                        },
+                        currentDeductible: 321
+                    }
+                };
 
                 const { wrapper } = getMountedComponent(storeData);
                 const amount = 123;

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -81,7 +81,7 @@
                         class="px-5 py-1 non-packaged-cart-item">
                         <div class="d-flex justify-content-between align-items-center">
                             <span
-                                v-if="isRecycle(item.partType)"
+                                v-if="item.cartItemType === cartItemType.RECYCLE_FEE"
                                 id="recycle-fee-label">
                                 <textLink
                                    linkType="text"
@@ -90,10 +90,11 @@
                                    @clickEvent="openModal(recyclingModalCmsWidgetName)" />
                             </span>
                             <span v-else>{{ item?.name ?? '' }}</span>
-                            <span>{{ getDisplayed(item?.subTotal ?? 0, false) }}</span>
+                            <span>{{ formatAmountInDollars(item?.subTotal ?? 0) }}</span>
                         </div>
                         <textLink
-                            v-if="isVap(item.partType) && (!readOnly || !showAsPaid)"
+                            v-if="item.cartItemType === cartItemType.VAP
+                                && (!readOnly || !showAsPaid)"
                             linkType="text"
                             text="Remove"
                             href="javascript:void(0)"
@@ -151,6 +152,7 @@ import { getHighestFullySatisfiedTier, getPackageContents } from '@/helpers/serv
 
 // Constants
 import partTypeStrings from '@/constants/part-type-strings.js';
+import cartItemType from '@/constants/cart-item-type.js';
 import partNumberStrings from '@/constants/part-number-strings.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 
@@ -182,7 +184,8 @@ export default {
                 mobileFee: 'MobileServiceWidget',
                 servicePackage: 'ServicePackageTitle',
                 vapsItemDescriptions: 'VapsItemDescriptions'
-            }
+            },
+            cartItemType
         };
     },
     computed: {
@@ -194,11 +197,13 @@ export default {
             return useMainStore().order.currentDeductible;
         },
         baseServiceLineItems() {
-            return [
+            const { supportingItems, glassParts, otherParts } = useMainStore().lineItems;
-                ...(useMainStore().lineItems.supportingItems ?? []),
+            const parts = [
-                ...(useMainStore().lineItems.glassParts ?? []),
+                ...(supportingItems ?? []),
-                ...(useMainStore().lineItems.otherParts ?? [])
+                ...(glassParts ?? []),
+                ...(otherParts ?? [])
             ];
+            return parts.filter((part) => part !== this.recycleFeeLineItem);
         },
         baseServicePrice() {
             return getPriceOfLineItems(this.baseServiceLineItems) ?? 0;
@@ -208,14 +213,32 @@ export default {
                 && (this.deductible == null || !useMainStore().isVerifiedCoverageStatus);
         },
         subTotal() {
-            const basePrice = !useMainStore().isNoComp && !useMainStore().isITAC
+            const { supportingItems, glassParts, otherParts, vaps, mobileFee } = useMainStore().lineItems;
-                ? this.deductible
+            const allLineItems = [
-                : this.baseServicePrice;
+                ...(supportingItems ?? []),
-            const nonPackageCartItemsPrice = this.nonServicePackageCartItems?.reduce(
+                ...(glassParts ?? []),
-                (accumulator, cartItem) => accumulator + (cartItem?.subTotal ?? 0),
+                ...(otherParts ?? []),
-                0
+                ...(vaps ?? []),
-            ) ?? 0;
+                mobileFee
-            return basePrice + nonPackageCartItemsPrice + this.packagePrice;
+            ];
+            return !useMainStore().isNoComp && !useMainStore().isITAC
+                ? this.deductible + getPriceOfLineItems([...this.feeLineItems, ...(vaps ?? [])])
+                : getPriceOfLineItems(allLineItems);
+        },
+        recycleFeeLineItem() {
+            return useMainStore().lineItems.supportingItems
+                ?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
+        },
+        feeLineItems() {
+            const { mobileFee } = useMainStore().lineItems;
+            const result = [];
+            if (mobileFee) {
+                result.push(mobileFee);
+            }
+            if (this.recycleFeeLineItem) {
+                result.push(this.recycleFeeLineItem);
+            }
+            return result;
         },
         salesTax() {
             function sumTax(lineItems) {
@@ -229,10 +252,7 @@ export default {
                     result += sumTax(this.baseServiceLineItems);
                 } else {
                     // deductible-case need to show tax for Recycle Fee
-                    const recycleFeeLineItem = useMainStore().lineItems.supportingItems
+                    result += this.recycleFeeLineItem != null ? this.recycleFeeLineItem.salesTax : 0;
-                        ?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
-
-                    result += recycleFeeLineItem != null ? recycleFeeLineItem.salesTax : 0;
                 }
             }
 
@@ -246,26 +266,34 @@ export default {
                 : this.subTotal + this.salesTax;
         },
         availableLineItems() {
-            const { glassParts, supportingItems } = useMainStore().lineItems;
+            const { supportingItems, glassParts, otherParts, mobileFee } = useMainStore().lineItems;
-            return [
+            const result = [
-                ...(glassParts ?? []),
                 ...(supportingItems ?? []),
+                ...(glassParts ?? []),
+                ...(otherParts ?? []),
                 ...(this.availableVaps ?? [])
             ];
+            if (mobileFee) {
+                result.push(mobileFee);
+            }
+            return result;
         },
         servicePackageTier() {
+            const { glassToReplace, isRepair } = useMainStore().damage;
+            const { vaps } = useMainStore().lineItems;
             return getHighestFullySatisfiedTier(
-                useMainStore().damage.glassToReplace ?? [],
+                glassToReplace ?? [],
                 this.availableLineItems,
-                useMainStore().damage.isRepair,
+                isRepair,
-                useMainStore().lineItems.vaps ?? []
+                vaps ?? []
             );
         },
         partTypesInServicePackage() {
+            const { glassToReplace, isRepair } = useMainStore().damage;
             return getPackageContents(
-                useMainStore().damage.glassToReplace ?? [],
+                glassToReplace ?? [],
                 this.availableLineItems,
-                useMainStore().damage.isRepair,
+                isRepair,
                 this.servicePackageTier
             ) ?? [];
         },
@@ -354,13 +382,12 @@ export default {
             return currentPackage?.SubWidgetName ?? '';
         },
         recycleFeeCartItem() {
-            const recycleFeeLineItem = useMainStore().lineItems.supportingItems
+            return this.recycleFeeLineItem
-                ?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
-            return recycleFeeLineItem
                 ? this.getCartItem(
                     this.getCmsContent(this.widget.recycleFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
-                    [recycleFeeLineItem],
+                    [this.recycleFeeLineItem],
-                    partTypeStrings.REPLACE_FEE // NOTE this is not a mistake
+                    cartItemType.RECYCLE_FEE,
+                    partTypeStrings.REPLACE_FEE
                 )
                 : null;
         },
@@ -370,6 +397,7 @@ export default {
                 ? this.getCartItem(
                     this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
                     [mobileFeeLineItem],
+                    cartItemType.MOBILE_FEE,
                     partTypeStrings.MOBILE_FEE
                 )
                 : null;
@@ -382,20 +410,20 @@ export default {
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
-        getDisplayed(amount, canBeVerifyingCoverage = true) {
+        getDisplayed(amount) {
-            return canBeVerifyingCoverage
+            return this.isUnverified
-                && this.isUnverified
                 && !useMainStore().isNoComp
                 && !useMainStore().isITAC
                 ? VERIFYING_COVERAGE
                 : formatAmountInDollars(amount);
         },
-        getCartItem(label, lineItems, partType) {
+        getCartItem(label, lineItems, cartItemTypeString, partType) {
             let cartItem = null;
 
             if (lineItems && lineItems.length > 0) {
                 cartItem = {
                     name: label,
+                    cartItemType: cartItemTypeString,
                     partType,
                     subTotal: getPriceOfLineItems(lineItems),
                     salesTax: lineItems?.reduce(
@@ -411,13 +439,13 @@ export default {
             const label = this.getCmsContentForVapsType(partType);
             const lineItems = useMainStore().lineItems.vaps
                 ?.filter((vapsLineItem) => vapsLineItem.partType === partType) ?? [];
-            return this.getCartItem(label, lineItems, partType);
+            return this.getCartItem(label, lineItems, cartItemType.VAP, partType);
         },
         removeVap(partType) {
             const newVaps = useMainStore().lineItems.vaps?.filter((vap) => vap?.partType !== partType) ?? [];
             useMainStore().updateVaps(newVaps);
         },
-        getCmsContentForVapsType(vapsType) {
+        getCmsContentForVapsType(vapsPartType) {
             const vapsItemDescriptions = this.getCmsContent(
                 this.widget.vapsItemDescriptions,
                 widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
@@ -427,20 +455,9 @@ export default {
                 return '';
             }
 
-            const vapsTypeDescription = vapsItemDescriptions?.find((entry) => entry?.Name === vapsType);
+            const vapsTypeDescription = vapsItemDescriptions?.find((entry) => entry?.Name === vapsPartType);
             return vapsTypeDescription?.Text ?? '';
         },
-        isVap(partType) {
-            const vapPartTypes = [
-                partTypeStrings.FRONT_WIPER,
-                partTypeStrings.REAR_WIPER,
-                partTypeStrings.RAIN_DEFENSE
-            ];
-            return vapPartTypes.includes(partType);
-        },
-        isRecycle(partType) {
-            return partTypeStrings.REPLACE_FEE === partType;
-        },
         formatAmountInDollars
     }
 };

src/store/index.js

@@ -1482,6 +1482,7 @@ export const useMainStore = defineStore({
 
         resetState() {
             Object.assign(this, getDefaultState());
+            console.log(JSON.stringify(this.order.lineItems.glassParts));
         },
 
         resetRegistrationState() {