CSR-1689: add cart to confirmation page

src/fmg-components/cart/cart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cart mb-5">
+    <div class="cart">
         <div class="px-0">
             <div
                 class="row vin-toggle flex align-items-center"
@@ -47,11 +47,14 @@
                         href="#!"
                         @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
                     <textLink
-                        v-else-if="cartItem == recycleFeeCartItem"
+                        v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName"
                         linkType="text"
                         :text="recycleFeeCartItem.name"
                         href="#!"
                         @click-event="openModal(recyclingModalCmsWidgetName)" />
+                    <span v-else-if="cartItem == recycleFeeCartItem">{{
+                        recycleFeeCartItem.name
+                    }}</span>
                     <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
 
@@ -64,6 +67,10 @@
                     <span>{{ salesTaxText }}</span
                     ><span>{{ currencyFormatter.format(salesTax) }}</span>
                 </div>
+                <div v-if="showAsPaid" class="amount-paid">
+                    <span>{{ amountPaidText }}</span
+                    ><span>{{ currencyFormatter.format(amountPaid) }}</span>
+                </div>
                 <div class="amount-due">
                     <span>{{ amountDueText }}</span
                     ><span>{{ currencyFormatter.format(amountDue) }}</span>
@@ -103,6 +110,7 @@ export default {
         availableVaps: Object,
         allowItemRemoval: Boolean,
         recyclingModalCmsWidgetName: String,
+        showAsPaid: Boolean,
     },
     data() {
         return {
@@ -327,7 +335,6 @@ export default {
                     }
                 }
             });
-
             return nonpackageCartItems;
         },
         frontWiperCartItemName() {
@@ -382,6 +389,7 @@ export default {
                     category: cartItemCategories.VAPS,
                     cartItemType: cartItemTypes.REAR_WIPERS,
                     isDisplayed: true,
+                    isRemovable: true,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -627,6 +635,9 @@ export default {
         amountDueText() {
             return this.getCmsContent("AmountDueTextWidget", "Text");
         },
+        amountPaidText() {
+            return this.getCmsContent("AmountPaidTextWidget", "Text");
+        },
         subtotalText() {
             return this.getCmsContent("SubtotalTextWidget", "Text");
         },
@@ -648,6 +659,15 @@ export default {
             return salesTax;
         },
         amountDue() {
+            if (this.showAsPaid) {
+                return 0;
+            }
+            return this.subTotal + this.salesTax;
+        },
+        amountPaid() {
+            if (!this.showAsPaid) {
+                return 0;
+            }
             return this.subTotal + this.salesTax;
         },
     },
@@ -669,6 +689,8 @@ export default {
 
 <style lang="scss">
 .cart {
+    margin-bottom: 1rem;
+
     h5 {
         border-bottom: 1px solid $gray-500;
         color: $black;
@@ -692,6 +714,7 @@ export default {
         max-height: 0;
         transition: all 350ms ease-in;
         overflow: hidden;
+
         div {
             display: flex;
             justify-content: space-between;
@@ -755,7 +778,8 @@ export default {
         }
         .sub-total,
         .sales-tax,
-        .amount-due {
+        .amount-due,
+        .amount-paid {
             font-weight: 500;
         }
         .sub-total {
@@ -782,7 +806,7 @@ export default {
             display: inline-flex;
             position: relative;
             right: 0.75rem;
-            margin: 1rem 0 1rem 1rem;
+            margin: 0.5rem 0 0.5rem 1rem;
             cursor: pointer;
         }
         &.expanded:after {
@@ -792,6 +816,7 @@ export default {
             max-height: 650px;
             transition: all 350ms ease-in;
             overflow: hidden;
+            padding-top: 1rem;
         }
     }
 }

src/layouts/confirmation/confirmation.spec.js

@@ -56,6 +56,9 @@ beforeEach(() => {
             damage: {
                 isRepair: false,
             },
+            payment: {
+                isPia: true,
+            },
             referralNumber: "1234567",
             vehicle: {
                 year: "2004",
@@ -113,6 +116,7 @@ beforeEach(() => {
                 emailAddress: "test@test.com",
             },
         },
+        damage: {},
         payment: {
             isInsurance: true,
         },

src/layouts/confirmation/confirmation.vue

@@ -37,6 +37,15 @@
 
                                 <div class="appoinmenttext" v-html="AppointmentWordingText"></div>
                             </div>
+                            <hr />
+                            <cart
+                                :damage="damageInfo"
+                                :availableVaps="vaps"
+                                :allowItemRemoval="false"
+                                v-model="lineItems"
+                                :showAsPaid="isPia"
+                                servicePackageOptionsCmsName="ServicePackageTitle" />
+                            <hr class="mb-5" />
                             <div class="emailtext" v-html="ConfirmationEmailText"></div>
                             <navbar
                                 cmsWidgetName="FunnelFooterWidget"
@@ -57,19 +66,21 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
+import cart from "@/fmg-components/cart/cart";
+
 //Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
+import store from "@/store";
 import { storeActions } from "@/constants/store-actions";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { applicationConfig } from "@/constants/application-config.js";
 import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
-
+import { deepClone } from "@/helpers/object-helper";
 import { Form } from "vee-validate";
-import store from "@/store";
-
 import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper";
+
 export default {
     name: "confirmation",
     async beforeRouteEnter(to, from, next) {
@@ -87,11 +98,21 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
+        const lineItemsFromStore = deepClone(store.getters.order.lineItems);
+
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.lineItems = lineItemsFromStore;
+            vm.vaps = lineItemsFromStore.vaps;
         });
     },
+    data() {
+        return {
+            lineItems: [],
+            vaps: [],
+        };
+    },
     computed: {
         ScheduleConfirmationText() {
             return this.getCmsContent("ScheduleConfirmationWidget", "BodyText");
@@ -209,6 +230,12 @@ export default {
         vehicleBannerImageUrl() {
             return store.getters.submittedOrder?.vehicle.imageUrl;
         },
+        damageInfo() {
+            return store.getters.damage;
+        },
+        isPia() {
+            return store.getters.submittedOrder?.payment.isPia;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -258,12 +285,14 @@ export default {
         navbar,
         vehicleBanner,
         addToCalendar,
+        cart,
     },
 };
 </script>
 
 <style lang="scss">
 .main {
+    margin-bottom: 1.5rem;
     padding: 1rem 1.5rem 1.5rem;
     box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
     border-radius: 5px;
@@ -336,7 +365,7 @@ export default {
 }
 
 .emailtext {
-    padding: 1.5rem 0 0;
+    padding: 0.5rem 0 0;
 
     p {
         font-size: 0.875rem;

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

@@ -29,14 +29,15 @@
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         recyclingModalCmsWidgetName="RecycleModal" />
 
-                    <hr class="my-5" />
                     <promoModalQuestion
-                        class="pb-3"
+                        class="pb-2"
                         v-model="lineItems"
                         :availableVaps="availableVaps"
                         linkWidgetName="PromoLinkWidget"
                         modalWidgetName="PromoModalWidget" />
 
+                    <hr class="mb-5" />
+
                     <div>
                         <alert
                             ref="piaErrorAlert"
@@ -409,7 +410,6 @@ export default {
                     return;
                 }
             }
-
             this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_PAY_NOW,

src/layouts/payment/payment.vue

@@ -26,13 +26,13 @@
 
                     <cart
                         :damage="damageInfo"
-                        :availableLineItems="availableLineItems"
+                        :availableVaps="availableVaps"
                         :allowItemRemoval="false"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         recyclingModalCmsWidgetName="RecycleModal" />
 
-                    <hr />
+                    <hr class="mb-5" />
 
                     <paymentSwitch
                         cmsWidgetName="PaymentMethodWidget"
@@ -267,12 +267,6 @@ export default {
             "payment"
         );
 
-        const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
-            storeActions.GET_SUPPORTING_ITEMS,
-            null,
-            "payment"
-        );
-
         // TODO: Data fetching Promise declarations
 
         const promiseResultMap = [
@@ -292,10 +286,6 @@ export default {
                 resultKey: "rainDefense",
                 promise: rainDefensePromise,
             },
-            {
-                resultKey: "supportingItems",
-                promise: supportingItemsPromise,
-            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -363,6 +353,7 @@ export default {
             taxedVaps,
             lineItems
         );
+        lineItems.vaps = lineItems.vaps ?? [];
         lineItems.vaps.push(...vapsToAddToCart);
 
         // Call the "next" function to complete the transition to this page.