CASH-580: Defect fixes and improvements

src/layouts/payment/payment.vue

@@ -64,7 +64,7 @@
 
                     <div class="payment-method-question">
                         <buttonQuestion
-                            v-if="!isAfterpay"
+                            v-if="showSwitchPaymentMethod"
                             groupName="payment-method"
                             buttonTypeString="payment-method-list-button"
                             :buttonTypeObject="paymentMethodListButton"
@@ -292,6 +292,7 @@ export default {
             availableVaps: [],
             shouldBlockInteraction: false,
             paymentMethodListButton: paymentMethodListButton,
+            showSwitchPaymentMethod: !this.isAfterpay(),
         };
     },
     props: {
@@ -514,12 +515,6 @@ export default {
             }
             return false;
         },
-        isAfterpay() {
-            if (this.paymentType == "ap") {
-                return true;
-            }
-            return false;
-        },
         shouldDisplayPiaCCAlert() {
             return this.shouldDisplayPiaAlert(paymentMethods.CREDIT_CARD);
         },
@@ -828,6 +823,12 @@ export default {
                     this.backButtonAction();
                 }
 
+                if (event.data.indexOf("afterpayOpened") > -1) {
+                    console.log(new Date() + ": Payment method afterpay selected");
+                    this.updatePaymentMethod(paymentMethods.AFTERPAY);
+                    this.showSwitchPaymentMethod = false;
+                }
+
                 if (event.data.indexOf("creditCardSubmit") > -1) {
                     console.log(new Date() + ": Payment method credit card selected");
                     this.updatePaymentMethod(paymentMethods.CREDIT_CARD);
@@ -865,11 +866,6 @@ export default {
             }
         },
         switchToAfterpay() {
-            this.dispatchStoreAction(
-                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
-                paymentMethods.AFTERPAY,
-                false
-            );
             const iframe = this.$refs.paymentFrame;
             if (iframe) {
                 iframe.contentWindow.postMessage("afterpay", "*");
@@ -892,6 +888,12 @@ export default {
         shouldDisplayPiaAlert(payMethod) {
             return this.$route?.query?.piaErrorType === payMethod;
         },
+        isAfterpay() {
+            if (this.paymentType == "ap") {
+                return true;
+            }
+            return false;
+        },
     },
     components: {
         funnelHeader,
@@ -915,6 +917,10 @@ export default {
     background-color: red;
 }
 
+.payment-method-question {
+    padding: 0 1.5rem;
+}
+
 .ui-block {
     position: fixed;
     top: 0;