Merge pull request #623 from Safelite/feature/SSR-1114

add cart to order-confirmation page

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

@@ -11,6 +11,7 @@ Object {
   "isExpanded": false,
   "widget": Object {
     "amountDue": "AmountDueTextWidget",
+    "amountPaid": "AmountPaidTextWidget",
     "basePrice": "BasePriceWidget",
     "deductible": "DeductibleWidget",
     "mobileFee": "MobileServiceWidget",

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

@@ -253,6 +253,27 @@ describe('cart-dropdown component', () => {
             // Assert
             expect(salesTax.exists()).toBeTruthy();
         });
+        test('amount paid when Pay in Advance', () => {
+            // Arrange
+            const reference = '#cart-amount-paid';
+            const isExpanded = true;
+            const showAsPaid = true;
+            const initialPropsData = { isExpanded, showAsPaid };
+            const storeData = {
+                order: {
+                    payment: {
+                        isPayInAdvance: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(storeData, {}, initialPropsData);
+
+            // Act
+            const amountPaid = wrapper.find(reference);
+
+            // Assert
+            expect(amountPaid.exists()).toBeTruthy();
+        });
         test('bottom amount due', () => {
             // Arrange
             const reference = '#bottom-amount-due';
@@ -631,7 +652,13 @@ describe('cart-dropdown component', () => {
                             vaps: null
                         },
                         payment: {
-                            insuranceCoverage: { isVerified: true }
+                            insuranceCoverage: {
+                                coverageStatus: coverageStatuses.VERIFIED
+                            }
+                        },
+                        policy: {
+                            noCoverage: false,
+                            isITAC: false
                         }
                     },
                     issConfig: {
@@ -669,7 +696,9 @@ describe('cart-dropdown component', () => {
                             ]
                         },
                         payment: {
-                            insuranceCoverage: { isVerified: true }
+                            insuranceCoverage: {
+                                coverageStatus: coverageStatuses.VERIFIED
+                            }
                         }
                     },
                     issConfig: {
@@ -1784,7 +1813,13 @@ describe('cart-dropdown component', () => {
                             isNoComp: false,
                             policyLookupSuccessful: true
                         },
-                        currentDeductible: 321
+                        currentDeductible: 321,
+                        policyLookupSuccessful: true,
+                        payment: {
+                            insuranceCoverage: {
+                                coverageStatus: coverageStatuses.VERIFIED
+                            }
+                        }
                     }
                 };
                 const { wrapper } = getMountedComponent(storeData);

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

@@ -129,6 +129,13 @@
                             <span id="sales-tax-label">{{ salesTaxLabel }}</span>
                             <span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
                         </div>
+                        <div
+                            v-if="showAsPaid"
+                            id="cart-amount-paid"
+                            class="pt-1 col d-flex justify-content-between">
+                            <span id="amount-paid-label">{{ amountPaidLabel }}</span>
+                            <span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
+                        </div>
                     </div>
                     <div
                         id="bottom-amount-due"
@@ -176,14 +183,16 @@ export default {
         readOnly: Boolean,
         recyclingModalCmsWidgetName: String,
         showDropdownHeader: Boolean,
-        isInitiallyExpanded: Boolean
+        isInitiallyExpanded: Boolean,
+        submittedOrder: Object
     },
     data() {
         return {
             isExpanded: this.isInitiallyExpanded,
-            availableVaps: useMainStore().order.availableVaps,
+            availableVaps: this.submittedOrder ? this.submittedOrder.lineItems.vaps : useMainStore().order.availableVaps,
             widget: {
                 amountDue: 'AmountDueTextWidget',
+                amountPaid: 'AmountPaidTextWidget',
                 deductible: 'DeductibleWidget',
                 basePrice: 'BasePriceWidget',
                 subtotal: 'SubtotalWidget',
@@ -199,17 +208,20 @@ export default {
     computed: {
         deductible() {
             // Note: added as computed so it can be used in the template.
-            return useMainStore().order.currentDeductible;
+            return this.submittedOrder ? this.submittedOrder.currentDeductible : useMainStore().order.currentDeductible;
         },
         showDeductibleCartItem() {
-            return !useMainStore().isNoComp && !useMainStore().isITAC;
+            return !this.isNoComp && !this.isITAC;
+        },
+        lineItems() {
+            return this.submittedOrder ? this.submittedOrder.lineItems : useMainStore().lineItems;
         },
         recycleFeeLineItem() {
-            return useMainStore().lineItems.supportingItems
+            return this.lineItems.supportingItems
                 ?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
         },
         baseServiceLineItems() {
-            const { supportingItems, glassParts, otherParts } = useMainStore().lineItems;
+            const { supportingItems, glassParts, otherParts } = this.lineItems;
             const parts = [
                 ...(supportingItems ?? []),
                 ...(glassParts ?? []),
@@ -220,8 +232,21 @@ export default {
         baseServicePrice() {
             return getPriceOfLineItems(this.baseServiceLineItems) ?? 0;
         },
+        isVerifiedCoverageStatus() {
+            return this.submittedOrder ? this.submittedOrder.payment.insuranceCoverage.isVerified : useMainStore().isVerifiedCoverageStatus;
+        },
+        isUnverified() {
+            return !this.isNoComp && !this.isITAC
+                && (this.deductible == null || !this.isVerifiedCoverageStatus);
+        },
+        isITAC() {
+            return this.submittedOrder ? this.submittedOrder.policy.isITAC : useMainStore().isITAC;
+        },
+        isNoComp() {
+            return this.submittedOrder ? this.submittedOrder.policy.noCoverage : useMainStore().isNoComp;
+        },
         subTotal() {
-            const { supportingItems, glassParts, otherParts, vaps, mobileFee } = useMainStore().lineItems;
+            const { supportingItems, glassParts, otherParts, vaps, mobileFee } = this.lineItems;
             const allLineItems = [
                 ...(supportingItems ?? []),
                 ...(glassParts ?? []),
@@ -229,12 +254,12 @@ export default {
                 ...(vaps ?? []),
                 mobileFee
             ];
-            return !useMainStore().isNoComp && !useMainStore().isITAC
+            return !this.isNoComp && !this.isITAC
                 ? this.deductible + getPriceOfLineItems([...this.feeLineItems, ...(vaps ?? [])])
                 : getPriceOfLineItems(allLineItems);
         },
         feeLineItems() {
-            const { mobileFee } = useMainStore().lineItems;
+            const { mobileFee } = this.lineItems;
             const result = [];
             if (mobileFee) {
                 result.push(mobileFee);
@@ -251,8 +276,8 @@ export default {
 
             let result = 0;
 
-            if (!useMainStore().isUnverified) {
+            if (!this.isUnverified) {
-                if (useMainStore().isITAC || useMainStore().isNoComp) {
+                if (this.isITAC || this.isNoComp) {
                     result += sumTax(this.baseServiceLineItems);
                 } else {
                     // deductible-case need to show tax for Recycle Fee
@@ -260,7 +285,7 @@ export default {
                 }
             }
 
-            result += sumTax(useMainStore().lineItems.vaps ?? []);
+            result += sumTax(this.lineItems.vaps ?? []);
 
             return result;
         },
@@ -269,8 +294,13 @@ export default {
                 ? 0
                 : this.subTotal + this.salesTax;
         },
+        amountPaid() {
+            return !this.showAsPaid
+                ? 0
+                : this.subTotal + this.salesTax;
+        },
         availableLineItems() {
-            const { supportingItems, glassParts, otherParts, mobileFee } = useMainStore().lineItems;
+            const { supportingItems, glassParts, otherParts, mobileFee } = this.lineItems;
             const result = [
                 ...(supportingItems ?? []),
                 ...(glassParts ?? []),
@@ -282,9 +312,12 @@ export default {
             }
             return result;
         },
+        vehicleDamage() {
+            return this.submittedOrder ? this.submittedOrder.damage : useMainStore().damage;
+        },
         servicePackageTier() {
-            const { glassToReplace, isRepair } = useMainStore().damage;
+            const { glassToReplace, isRepair } = this.vehicleDamage;
-            const { vaps } = useMainStore().lineItems;
+            const { vaps } = this.lineItems;
             return getHighestFullySatisfiedTier(
                 glassToReplace ?? [],
                 this.availableLineItems,
@@ -293,7 +326,7 @@ export default {
             );
         },
         partTypesInServicePackage() {
-            const { glassToReplace, isRepair } = useMainStore().damage;
+            const { glassToReplace, isRepair } = this.vehicleDamage;
             return getPackageContents(
                 glassToReplace ?? [],
                 this.availableLineItems,
@@ -315,7 +348,7 @@ export default {
             return items;
         },
         nonServicePackageCartItems() {
-            const vapPartTypesInOrder = Array.from(new Set(useMainStore().lineItems.vaps?.map((vap) => vap.partType) ?? []));
+            const vapPartTypesInOrder = Array.from(new Set(this.lineItems.vaps?.map((vap) => vap.partType) ?? []));
             const vapPartTypesInOrderButNotPackage = vapPartTypesInOrder
                 .filter((partType) => !this.partTypesInServicePackage.includes(partType))
                 ?? [];
@@ -358,6 +391,9 @@ export default {
         amountDueLabel() {
             return this.getCmsContent(this.widget.amountDue, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
         },
+        amountPaidLabel() {
+            return this.getCmsContent(this.widget.amountPaid, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+        },
         deductibleLabel() {
             return this.getCmsContent(this.widget.deductible, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
         },
@@ -396,7 +432,7 @@ export default {
                 : null;
         },
         mobileFeeCartItem() {
-            const mobileFeeLineItem = useMainStore().lineItems.mobileFee;
+            const mobileFeeLineItem = this.lineItems.mobileFee;
             return mobileFeeLineItem
                 ? this.getCartItem(
                     this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
@@ -415,9 +451,9 @@ export default {
             this.isExpanded = !this.isExpanded;
         },
         getDisplayed(amount) {
-            return useMainStore().isUnverified
+            return this.isUnverified
-                && !useMainStore().isNoComp
+                && !this.isNoComp
-                && !useMainStore().isITAC
+                && !this.isITAC
                 ? VERIFYING_COVERAGE
                 : formatAmountInDollars(amount);
         },
@@ -441,7 +477,7 @@ export default {
         },
         getCartItemForVapsPart(partType) {
             const label = this.getCmsContentForVapsType(partType);
-            const lineItems = useMainStore().lineItems.vaps
+            const lineItems = this.lineItems.vaps
                 ?.filter((vapsLineItem) => vapsLineItem.partType === partType) ?? [];
             return this.getCartItem(label, lineItems, cartItemType.VAP, partType);
         },

src/layouts/order-confirmation/order-confirmation.spec.js

@@ -14,7 +14,8 @@ jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
 jest.mock('@/helpers/cms-content-helper', () => ({
     fetchCmsContentForPage: jest.fn(),
-    processIfStatements: jest.fn()
+    processIfStatements: jest.fn(),
+    splitCopyOnCMSPlaceHolder: jest.fn()
 }));
 const wordingText = 'wording text {custom:address}';
 
@@ -105,7 +106,17 @@ const sessionStorage = {
                 zipCode: '12345'
             }
         }
-    }
+    },
+    payment: {
+        isPayInAdvance: false
+    },
+    lineItems: {
+        vaps: []
+    },
+    policy: {
+        noCoverage: false
+    },
+    damage: {}
 };
 
 const sessionStorageMock = (() => {
@@ -302,7 +313,17 @@ describe('OrderConfirmation.vue', () => {
                 },
                 serviceLocation: {
                     appointmentType: 'Mobile'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -331,7 +352,17 @@ describe('OrderConfirmation.vue', () => {
                             zipCode: '12345'
                         }
                     }
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -368,7 +399,17 @@ describe('OrderConfirmation.vue', () => {
                     state: 'AZ',
                     zipCode: '12345',
                     appointmentType: 'Mobile'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -397,7 +438,17 @@ describe('OrderConfirmation.vue', () => {
                         }
                     },
                     appointmentType: 'Dropoff'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -426,7 +477,17 @@ describe('OrderConfirmation.vue', () => {
                         }
                     },
                     appointmentType: 'Inshop'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -452,7 +513,17 @@ describe('OrderConfirmation.vue', () => {
                     state: 'AZ',
                     zipCode: '12345',
                     appointmentType: 'Mobile'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -481,7 +552,17 @@ describe('OrderConfirmation.vue', () => {
                         }
                     },
                     appointmentType: 'Inshop'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -507,7 +588,17 @@ describe('OrderConfirmation.vue', () => {
                     state: 'AZ',
                     zipCode: '12345',
                     appointmentType: 'Mobile'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -536,7 +627,17 @@ describe('OrderConfirmation.vue', () => {
                         }
                     },
                     appointmentType: 'Dropoff'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();
@@ -566,7 +667,17 @@ describe('OrderConfirmation.vue', () => {
                         }
                     },
                     appointmentType: 'Inshop'
-                }
+                },
+                payment: {
+                    isPayInAdvance: false
+                },
+                lineItems: {
+                    vaps: []
+                },
+                policy: {
+                    noCoverage: false
+                },
+                damage: {}
             };
             window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
             const { wrapper } = getMountedComponent();

src/layouts/order-confirmation/order-confirmation.vue

@@ -47,6 +47,14 @@
                             v-html="appointmentWordingText2">
                         </div>
                     </div>
+                    <div>
+                        <cartDropdown
+                            :showAsPaid="isPayInAdvance"
+                            :readOnly="true"
+                            recyclingModalCmsWidgetName="RecycleModal"
+                            servicePackageTitleWidgetName="ServicePackageTitle"
+                            :submittedOrder="submittedOrder" />
+                    </div>
                     <div
                         class="email-confirmation-text"
                         v-html="confirmationEmailText" />
@@ -69,6 +77,8 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
+import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
+
 // Supporting files
 import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
@@ -91,22 +101,26 @@ export default {
         siteHeader,
         vehicleBanner,
         siteFooter,
-        addToCalendar
+        addToCalendar,
+        cartDropdown
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        console.log('beforeRouteEnter just called');
         useMainStore().createSubmittedOrder();
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
-            }];
+            }
+        ];
+
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
+
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
@@ -263,6 +277,12 @@ export default {
                 this.submittedOrder.schedule.jobMaxMinutes
             );
             return inshopDurationTime;
+        },
+        isPayInAdvance() {
+            return this.submittedOrder.payment.isPayInAdvance;
+        },
+        selectedVaps() {
+            return this.submittedOrder.lineItems.vaps;
         }
     },
     mounted() {