SSR-1067 Add cart to payment-page

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

@@ -2,6 +2,7 @@
 
 exports[`cart-dropdown component initial data rendered as expected 1`] = `
 Object {
+  "availableVaps": Array [],
   "cartItemType": Object {
     "MOBILE_FEE": "MOBILE FEE",
     "RECYCLE_FEE": "RECYCLE FEE",

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

@@ -797,8 +797,8 @@ describe('cart-dropdown component', () => {
             test('returns expected when availableVaps null', async () => {
                 // Arrange
                 const availableVaps = [{ partNumber: 'vaps1' }];
-                const propsData = { availableVaps };
+                const initialData = { availableVaps };
-                const { wrapper } = getMountedComponent({}, {}, propsData);
+                const { wrapper } = getMountedComponent({}, initialData, {});
                 const expected = availableVaps;
 
                 // Act
@@ -825,10 +825,10 @@ describe('cart-dropdown component', () => {
                         }
                     }
                 };
-                const propsData = {
+                const initialData = {
                     availableVaps: [part4, part5]
                 };
-                const { wrapper } = getMountedComponent(storeData, {}, propsData);
+                const { wrapper } = getMountedComponent(storeData, initialData, {});
                 const sortByPartType = (a, b) => {
                     const typeA = a.partType.toUpperCase();
                     const typeB = b.partType.toUpperCase();

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

@@ -1,8 +1,9 @@
 <template>
     <div>
         <div
+            v-if="showDropdownHeader"
             id="cart-dropdown-head"
-            class="row cart-toggle flex align-items-center pt-4"
+            class="row flex align-items-center pt-4 cart-header cart-toggle"
             :class="[isExpanded ? 'expanded' : '']"
             @click="toggleIsExpanded">
             <a
@@ -13,6 +14,11 @@
                 <span class="color-green">{{ getDisplayed(amountDue) }}</span>
             </a>
         </div>
+        <div
+            v-else
+            id="cart-dropdown-head"
+            class="expanded cart-header">
+        </div>
         <div
             id="cart-table"
             class="cart-table">
@@ -155,6 +161,7 @@ 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';
+import issPageValues from '@/router/router-constants/issPage-values';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -169,11 +176,13 @@ export default {
         showAsPaid: Boolean,
         readOnly: Boolean,
         recyclingModalCmsWidgetName: String,
-        availableVaps: Array
+        showDropdownHeader: Boolean,
+        defaultDropdownExpanded: Boolean
     },
     data() {
         return {
-            isExpanded: false,
+            isExpanded: this.defaultDropdownExpanded,
+            availableVaps: useMainStore().pageData(issPageValues.PAYMENT_METHOD)?.vaps ?? [],
             widget: {
                 amountDue: 'AmountDueTextWidget',
                 deductible: 'DeductibleWidget',
@@ -535,25 +544,30 @@ export default {
     text-align: center;
 }
 
-.cart-toggle {
+.cart-header {
-    font-weight: $font-weight-bold;
+    &.cart-toggle {
+        font-weight: $font-weight-bold;
 
-    &:after {
+        &:after {
-        content: "";
+            content: "";
-        transition: all 0.5s ease;
+            transition: all 0.5s ease;
-        background-image: url($svg-payment-method-review-toggle);
+            background-image: url($svg-payment-method-review-toggle);
-        background-repeat: no-repeat;
+            background-repeat: no-repeat;
-        background-position: right center;
+            background-position: right center;
-        width: 1rem;
+            width: 1rem;
-        height: 0.5625rem;
+            height: 0.5625rem;
-        display: inline-flex;
+            display: inline-flex;
-        position: relative;
+            position: relative;
-        right: 0.75rem;
+            right: 0.75rem;
-        margin: 0.5rem 0 0.5rem 1rem;
+            margin: 0.5rem 0 0.5rem 1rem;
-        cursor: pointer;
+            cursor: pointer;
-    }
+        }
-    &.expanded:after {
+        &.expanded:after {
-        transform: rotate(180deg);
+            transform: rotate(180deg);
+        }
+        a {
+            text-decoration: none;
+        }
     }
     &.expanded + .cart-table {
         max-height: 50rem;
@@ -561,9 +575,6 @@ export default {
         overflow: hidden;
         visibility: visible;
     }
-    a {
-        text-decoration: none;
-    }
 }
 
 :deep(#recycle-fee-label a){

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

@@ -22,9 +22,10 @@
                 <cartDropdown
                     :showAsPaid="false"
                     :readOnly="false"
+                    :showDropdownHeader="true"
+                    :defaultDropdownExpanded="false"
                     recyclingModalCmsWidgetName="RecycleModal"
-                    servicePackageTitleWidgetName="ServicePackageTitle"
+                    servicePackageTitleWidgetName="ServicePackageTitle" />
-                    :availableVaps="availableVaps" />
                 <hr class="mt-0 mb-5" />
                 <alert
                     v-if="displayPayInAdvanceAlert"
@@ -79,6 +80,7 @@ import { Form } from 'vee-validate';
 import issPageValues from '@/router/router-constants/issPage-values';
 import bailoutMessage from '@/constants/bailoutMessage';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
+import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 
 export default {
     name: 'payment-method',
@@ -91,7 +93,8 @@ export default {
         reviewDropdown,
         cartDropdown,
         paymentMethodQuestion,
-        alert
+        alert,
+        VehicleBanner
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -293,6 +296,12 @@ export default {
         },
         setAvailableVaps(vaps) {
             this.availableVaps = vaps;
+            useMainStore().updatePageData({
+                page: issPageValues.PAYMENT_METHOD,
+                data: {
+                    vaps
+                }
+            });
         }
     }
 };

src/layouts/payment-page/payment-page.vue

@@ -40,6 +40,16 @@
                         :isForwardButtonHidden="true"
                         @ForwardClicked="forwardButtonAction"
                         @backClicked="backButtonAction" />
+
+                    <div class="px-2">
+                        <cartDropdown
+                            :showAsPaid="false"
+                            :readOnly="true"
+                            :showDropdownHeader="false"
+                            :defaultDropdownExpanded="true"
+                            recyclingModalCmsWidgetName="RecycleModal"
+                            servicePackageTitleWidgetName="ServicePackageTitle" />
+                    </div>
                 </div>
             </div>
 
@@ -390,10 +400,12 @@ import { hopPaymentMethods, paymentMethods } from '@/constants/payment-method-co
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import queryStrings from '@/constants/query-strings';
 import alert from '@/ux-components/alert/alert.vue';
+import cartDropdown from "@/iss-components/cart-dropdown/cart-dropdown.vue";
 
 export default {
     name: 'payment-page',
     components: {
+        cartDropdown,
         siteHeader,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names