Merge pull request #1375 from Safelite/feature/CSR-1391

Feature/csr 1391

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

@@ -66,6 +66,15 @@
                                 alt="PayPal" />
                         </button>
                     </div>
+                    <div>
+                        <button v-on:click="afterpay">
+                            <img
+                                src="https://business.afterpay.com/rs/539-RJA-633/images/AP_logo_badge_6328x2204_blackmint_png.png"
+                                width="100"
+                                height="26"
+                                alt="Afterpay" />
+                        </button>
+                    </div>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -221,6 +230,16 @@ export default {
                 this.$route
             );
         },
+        async afterpay() {
+            this.$refs.loadingModal.showModal();
+            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
+            await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+            await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "ap", false);
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_PAY_NOW,
+                this.$route
+            );
+        },
     },
     computed: {
         damageInfo() {

src/layouts/payment/payment.vue

@@ -11,6 +11,7 @@
             <hr class="mt-0" />
             <div id="card-container">
                 <iframe
+                    ref="paymentFrame"
                     class="hop-iframe payment-iframe"
                     name="card-frame"
                     id="card-frame"
@@ -32,7 +33,7 @@
     <form
         ref="myForm"
         id="card-data"
-        :target="isPaypal ? '_top' : 'card-frame'"
+        :target="paypalPayment ? '_top' : 'card-frame'"
         method="POST"
         :action="checkoutUrl">
         <input type="hidden" name="paymentType" :value="paymentType" />
@@ -219,11 +220,9 @@ export default {
             lineItems: "Labor|189.99|1||Repair supplies|7.99|1",
             sgHeaderline1: this.getHeaderLine1(),
             sgHeaderline2: this.getHeaderLine2(),
+            paypalPayment: this.isPaypal(),
         };
     },
-    async mounted() {
-        this.fetchSignatureInfo();
-    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -239,8 +238,9 @@ export default {
         const resultMap = await settleAllPromises(promiseResultMap);
 
         // Call the "next" function to complete the transition to this page.
-        next((vm) => {
+        next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.fetchSignatureInfo();
         });
     },
     methods: {
@@ -299,7 +299,9 @@ export default {
         },
         forwardButtonAction() {},
         async fetchSignatureInfo() {
-            this.$refs.loadingModal.showModal();
+            if (this.isPaypal()) {
+                this.$refs.loadingModal.showModal();
+            }
             const signatureInfo = await this.dispatchStoreAction(storeActions.GET_SIGNATURE);
             this.authToken = signatureInfo.data.token;
             this.authSignature = signatureInfo.data.signature;
@@ -307,6 +309,17 @@ export default {
 
             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", "*");
+                            }
+                        };
+                    }
+                }
             });
         },
     },