From 1061ba8c3435274bd0daa14e6aeacc8f37e6fd6e Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Fri, 27 Oct 2023 10:45:21 -0400
Subject: [PATCH 1/2] CSR-1391 switch payment functionality

---
 src/layouts/payment/payment.vue | 72 ++++++++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 8c4a28e7f..dd3442bb8 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -20,6 +20,39 @@
                             scrolling="no">
                         </iframe>
                     </div>
+                    <div>Switch payment to:</div>
+                    <div>
+                        <button
+                            v-if="paymentType !== 'cc'"
+                            ref="switchToCCButton"
+                            type="button"
+                            @mousedown="switchPIAMethod('cc')"
+                            aria-label="Switch to Credit Card">
+                            Switch to Credit Card
+                        </button>
+                    </div>
+                    <div v-if="paymentType !== 'cc'">or</div>
+                    <div>
+                        <button
+                            v-if="paymentType !== 'pp'"
+                            ref="switchToPPButton"
+                            type="button"
+                            @mousedown="switchPIAMethod('pp')"
+                            aria-label="Switch to PayPal">
+                            Switch to PayPal
+                        </button>
+                    </div>
+                    <div v-if="paymentType === 'cc'">or</div>
+                    <div>
+                        <button
+                            v-if="paymentType !== 'ap'"
+                            ref="switchToAPButton"
+                            type="button"
+                            @mousedown="switchPIAMethod('ap')"
+                            aria-label="Switch to Afterpay">
+                            Switch to Afterpay
+                        </button>
+                    </div>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -32,7 +65,7 @@
     </Form>
 
     <form
-        ref="myForm"
+        ref="hopForm"
         id="card-data"
         :target="paypalPayment ? '_top' : 'card-frame'"
         method="POST"
@@ -403,6 +436,28 @@ export default {
             window.location = applicationConfig.PIA_CANCEL_URL;
             //this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
+        switchPIAMethod(payMethod) {
+            this.paymentType = payMethod;
+            this.submitHopForm();
+        },
+        submitHopForm() {
+            this.$nextTick(() => {
+                this.$refs.hopForm.submit();
+
+                const iframe = this.$refs.paymentFrame;
+                if (iframe) {
+                    iframe.onload = () => {
+                        if (iframe.contentWindow) {
+                            if (this.paymentType == "cc") {
+                                iframe.contentWindow.postMessage("CreditCardChosen", "*");
+                            } else if (this.paymentType == "ap") {
+                                iframe.contentWindow.postMessage("afterpay", "*");
+                            }
+                        }
+                    };
+                }
+            });
+        },
         async fetchSignatureInfo(signatureInfo) {
             if (this.isPaypal()) {
                 this.$refs.loadingModal.showModal();
@@ -412,20 +467,7 @@ export default {
             this.authSignature = signatureInfo.signature;
             this.authSignatureStart = signatureInfo.startDate;
 
-            this.$nextTick(() => {
-                this.$refs.myForm.submit();
-
-                if (this.paymentType == "ap") {
-                    const iframe = this.$refs.paymentFrame;
-                    if (iframe) {
-                        iframe.onload = () => {
-                            if (iframe.contentWindow) {
-                                iframe.contentWindow.postMessage("afterpay", "*");
-                            }
-                        };
-                    }
-                }
-            });
+            this.submitHopForm();
         },
     },
     components: {

From 248d666d9e96eb94d033fd78395ca4931f1e9516 Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Fri, 27 Oct 2023 13:43:43 -0400
Subject: [PATCH 2/2] CSR-1391 moved switch payment label to cms

still need to refine the styling for this switch payment section, but i think it makes sense to commit this functionality for now
---
 src/layouts/payment/payment.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index dd3442bb8..2f6891138 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -20,7 +20,7 @@
                             scrolling="no">
                         </iframe>
                     </div>
-                    <div>Switch payment to:</div>
+                    <div>{{ switchPaymentText }}</div>
                     <div>
                         <button
                             v-if="paymentType !== 'cc'"
@@ -282,6 +282,9 @@ export default {
             }
             return "";
         },
+        switchPaymentText() {
+            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
+        },
     },
     methods: {
         arePagePrerequisitesValid() {