Merge pull request #627 from Safelite/feature/digital/1067.1

SSR-1067 Payment Page Cart Bug Fixes

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

@@ -65,7 +65,7 @@
                             <div class="py-1 d-flex justify-content-between align-items-center">
                                 <span>{{ item?.name ?? '' }}</span>
                                 <textLink
-                                    v-if="!readOnly || !showAsPaid"
+                                    v-if="!readOnly"
                                     linkType="text"
                                     text="Remove"
                                     href="javascript:void(0)"
@@ -100,7 +100,7 @@
                         </div>
                         <textLink
                             v-if="item.cartItemType === cartItemType.VAP
-                                && (!readOnly || !showAsPaid)"
+                                && !readOnly"
                             linkType="text"
                             text="Remove"
                             href="javascript:void(0)"

src/layouts/payment-page/payment-page.spec.js

@@ -7,6 +7,7 @@ import { getMountOptions } from '@/helpers/unit-test-helper';
 import { useMainStore } from '@/store';
 import { paymentMethods, hopPaymentMethods } from '@/constants/payment-method-constants.js';
 import queryStrings from '@/constants/query-strings';
+import CartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
 
 // Constants
 const parts = {
@@ -316,6 +317,44 @@ describe('payment-page.vue', () => {
             });
         });
 
+        describe('cart-dropdown', () => {
+            test('Show cart dropdown if credit card', async () => {
+                const wrapper = setupMocks({});
+                wrapper.vm.paymentType = hopPaymentMethods.CREDIT_CARD;
+
+                // Act
+                await wrapper.vm.$nextTick();
+                const cartTable = wrapper.findComponent(CartDropdown);
+
+                // Assert
+                expect(cartTable.exists()).toBeTruthy();
+            });
+
+            test('Hide cart dropdown if afterpay', async () => {
+                const wrapper = setupMocks({});
+                wrapper.vm.paymentType = hopPaymentMethods.AFTERPAY;
+
+                // Act
+                await wrapper.vm.$nextTick();
+                const cartTable = wrapper.findComponent(CartDropdown);
+
+                // Assert
+                expect(cartTable.exists()).toBeFalsy();
+            });
+
+            test('Hide cart dropdown if paypal', async () => {
+                const wrapper = setupMocks({});
+                wrapper.vm.paymentType = hopPaymentMethods.PAYPAL;
+
+                // Act
+                await wrapper.vm.$nextTick();
+                const cartTable = wrapper.findComponent(CartDropdown);
+
+                // Assert
+                expect(cartTable.exists()).toBeFalsy();
+            });
+        });
+
         describe('isPaypal', () => {
             test('Is responsive if initial data changes', async () => {
                 // Arrange

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

@@ -41,9 +41,8 @@
                         @ForwardClicked="forwardButtonAction"
                         @backClicked="backButtonAction" />
 
-                    <div class="px-2">
+                    <div v-if="isCreditCard" class="px-2">
                         <cartDropdown
-                            :showAsPaid="false"
                             :readOnly="true"
                             :showDropdownHeader="false"
                             :isInitiallyExpanded="true"
@@ -525,6 +524,9 @@ export default {
         isPaypal() {
             return this.paymentType === hopPaymentMethods.PAYPAL;
         },
+        isCreditCard() {
+            return this.paymentType === hopPaymentMethods.CREDIT_CARD;
+        },
         displayPayInAdvanceCreditCardAlert() {
             return this.displayPayInAdvanceAlert(paymentMethods.CREDIT_CARD);
         },