CASH-580: Add switch to Afterpay button

src/layouts/payment/payment.vue

@@ -62,6 +62,23 @@
                         :isNoComp="isNoComp"
                         :isExpandedOnLoad="true" />
 
+                    <div class="payment-method-question">
+                        <buttonQuestion
+                            v-if="!isAfterpay"
+                            groupName="payment-method"
+                            buttonTypeString="payment-method-list-button"
+                            :buttonTypeObject="paymentMethodListButton"
+                            isWide
+                            :questionText="paymentMethodQuestionText"
+                            :answers="paymentMethodAnswerData"
+                            isRequired
+                            :validationRules="validationRules"
+                            :showApplePay="false"
+                            :isInsurance="isInsurance"
+                            v-model="switchedPaymentMethod"
+                            textPosition="text-start" />
+                    </div>
+
                     <hr class="mb-5" />
 
                     <navbar
@@ -239,6 +256,8 @@ import {
     getSalesTax,
 } from "@/helpers/pricing-helper.js";
 import { debugLog } from "@/helpers/debug-log-helper.js";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import paymentMethodListButton from "@/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button";
 
 export default {
     name: "payment",
@@ -272,8 +291,12 @@ export default {
             lineItems: [],
             availableVaps: [],
             shouldBlockInteraction: false,
+            paymentMethodListButton: paymentMethodListButton,
         };
     },
+    props: {
+        switchedpaymentTypeValue: String,
+    },
     directives: {
         resize: {
             mounted: function (el) {
@@ -419,6 +442,17 @@ export default {
         });
     },
     computed: {
+        switchedPaymentMethod: {
+            get: function () {
+                return this.switchedpaymentTypeValue;
+            },
+            set: function (switchedPaymentMethod) {
+                this.$emit("update:switchedpaymentTypeValue", switchedPaymentMethod);
+                if (switchedPaymentMethod === paymentMethods.AFTERPAY) {
+                    this.switchToAfterpay();
+                }
+            },
+        },
         parentNomainName() {
             return window.location.hostname;
         },
@@ -480,12 +514,36 @@ export default {
             }
             return false;
         },
+        isAfterpay() {
+            if (this.paymentType == "ap") {
+                return true;
+            }
+            return false;
+        },
         shouldDisplayPiaCCAlert() {
             return this.shouldDisplayPiaAlert(paymentMethods.CREDIT_CARD);
         },
         shouldDisplayPiaAPAlert() {
             return this.shouldDisplayPiaAlert(paymentMethods.AFTERPAY);
         },
+        paymentMethodQuestionText() {
+            return this.getCmsContent("SwitchPaymentMethodWidget", "QuestionText");
+        },
+        paymentMethodAnswerData() {
+            var cmsData = this.getAnswersNullSafe("SwitchPaymentMethodWidget");
+
+            var tempItems = cmsData.map((answer) => {
+                return {
+                    buttonLabel: answer.Text,
+                    altText: answer.Text,
+                    groupName: "payment-method",
+                    value: answer.Name,
+                    buttonImage: answer.AnswerImageUrl,
+                };
+            });
+
+            return tempItems;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -594,6 +652,15 @@ export default {
 
             return preReqResult;
         },
+        getAnswersNullSafe(widgetName) {
+            const rawData = this.getCmsContent(widgetName, "Answers");
+
+            if (!rawData) {
+                return [];
+            } else {
+                return rawData;
+            }
+        },
         getWOrkOrderNumber() {
             if (store.getters.order.workOrderNumber) {
                 const items = store.getters.order.workOrderNumber.split("-");
@@ -797,6 +864,18 @@ export default {
                 );
             }
         },
+        switchToAfterpay() {
+            this.dispatchStoreAction(
+                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+                paymentMethods.AFTERPAY,
+                false
+            );
+            const iframe = this.$refs.paymentFrame;
+            if (iframe) {
+                iframe.contentWindow.postMessage("afterpay", "*");
+                window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+            }
+        },
         setIFrameListener() {
             window.addEventListener("message", (event) =>
                 this.handleIFrameContentWindowMessage(event)
@@ -820,6 +899,7 @@ export default {
         loadingModal,
         cart,
         alert,
+        buttonQuestion,
     },
 };
 </script>