CSR-1391 moved signature api call to beforeRouteEnter and other fixes

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

@@ -291,13 +291,13 @@ export default {
 
             switch (this.paymentMethod) {
                 case paymentMethods.CREDIT_CARD:
-                    this.piaSetup(this.paymentMethod);
+                    this.setupPia(this.paymentMethod);
                     break;
                 case paymentMethods.PAYPAL:
-                    this.piaSetup(this.paymentMethod);
+                    this.setupPia(this.paymentMethod);
                     break;
                 case paymentMethods.AFTERPAY:
-                    this.piaSetup(this.paymentMethod);
+                    this.setupPia(this.paymentMethod);
                     break;
                 default:
                     this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
@@ -309,7 +309,7 @@ export default {
                     );
             }
         },
-        async piaSetup(payNowType) {
+        async setupPia(payNowType) {
             this.$refs.loadingModal.showModal();
 
             // since we're leaving the site for pia, clear any save session promises that we will not be able to resolve when we return

src/layouts/payment/payment.vue

@@ -61,9 +61,9 @@
         <input type="hidden" name="sgDeclineResponseURL" :value="piaResponseUrl" />
         <input type="hidden" name="sgErrorResponseURL" :value="piaResponseUrl" />
 
-        <input type="hidden" name="sgheaderline1" :value="sgHeaderline1" />
+        <input type="hidden" name="sgheaderline1" :value="getHeaderLine1" />
         <input type="hidden" name="sgHeader1subtitle" value="" />
-        <input type="hidden" name="sgheaderline2" :value="sgHeaderline2" />
+        <input type="hidden" name="sgheaderline2" :value="getHeaderLine2" />
         <input type="hidden" name="sgheaderline3" value="" />
         <input type="hidden" name="sgheaderline4" value="" />
         <input type="hidden" name="sgheaderline5" value="*Required information" />
@@ -200,14 +200,19 @@ export default {
             totalAmount: this.getAmountDue(),
             displayAmount: this.getDisplayAmountDue(),
             piaLineItems: this.getPiaLineItems(),
-            sgHeaderline1: this.getHeaderLine1(),
-            sgHeaderline2: this.getHeaderLine2(),
             paypalPayment: this.isPaypal(),
         };
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        const signaturePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_SIGNATURE,
+            null,
+            "payment"
+        );
+
         // TODO: Data fetching Promise declarations
 
         const promiseResultMap = [
@@ -215,6 +220,10 @@ export default {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "signature",
+                promise: signaturePromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -222,7 +231,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.fetchSignatureInfo();
+            vm.fetchSignatureInfo(resultMap.signature);
         });
     },
     computed: {
@@ -234,6 +243,18 @@ export default {
             const { protocol, hostname, port } = window.location;
             return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
         },
+        getHeaderLine1() {
+            if (!this.isPaypal()) {
+                return this.getCmsContent("PIAHeaderLine1", "Text");
+            }
+            return "";
+        },
+        getHeaderLine2() {
+            if (!this.isPaypal()) {
+                return this.getCmsContent("PIAHeaderLine2", "Text");
+            }
+            return "";
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -242,7 +263,7 @@ export default {
         },
         getWOrkOrderNumber() {
             if (store.getters.order.workOrderNumber) {
-                var items = store.getters.order.workOrderNumber.split("-");
+                const items = store.getters.order.workOrderNumber.split("-");
                 return items[1];
             }
 
@@ -296,27 +317,15 @@ export default {
                     return store.getters.payment.piaType;
             }
         },
-        getHeaderLine1() {
-            if (!this.isPaypal()) {
-                return "Submit payment information";
-            }
-            return "";
-        },
-        getHeaderLine2() {
-            if (!this.isPaypal()) {
-                return "Save time when you pay for your service today! Please select a payment option.";
-            }
-            return "";
-        },
         getPiaLineItems() {
-            var itemsForPia = "";
-            var glassParts = store.getters.order.lineItems.glassParts;
-            var supportingItems = store.getters.order.lineItems.supportingItems;
-            var vaps = store.getters.order.lineItems.vaps;
+            let itemsForPia = "";
+            const glassParts = store.getters.order.lineItems.glassParts;
+            const supportingItems = store.getters.order.lineItems.supportingItems;
+            const vaps = store.getters.order.lineItems.vaps;
             const items = [...(glassParts ?? []), ...(supportingItems ?? []), ...(vaps ?? [])];
 
-            for (var i = 0; i < items.length; i++) {
-                var amount = items[i].laborAmount + items[i].sellingPrice;
+            for (let i = 0; i < items.length; i++) {
+                const amount = items[i].laborAmount + items[i].sellingPrice;
                 itemsForPia += items[i].partType + "|" + amount + "|1|";
             }
             return itemsForPia;
@@ -351,10 +360,10 @@ export default {
             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;
-            this.authSignatureStart = signatureInfo.data.startDate;
+
+            this.authToken = signatureInfo.token;
+            this.authSignature = signatureInfo.signature;
+            this.authSignatureStart = signatureInfo.startDate;
 
             this.$nextTick(() => {
                 this.$refs.myForm.submit();