feat: link modals to server endpoints (#3476)

Author: uds5501

app/controllers/orders/pending.js

@@ -51,20 +51,53 @@ export default Controller.extend({
         this.notify.error(this.l10n.t(error.error));
       }
     },
-    openPaytmModal() {
+    async openPaytmModal() {
       // Model controller for PaytmModal
-      this.setProperties({
-        'isPaytmModalOpen': true
-      });
+      try {
+        const res = await this.loader.post(`orders/${this.model.order.identifier}/paytm/initiate-transaction`);
+        this.setProperties({
+          'isPaytmModalOpen' : true,
+          'txnToken'         : res.body.txnToken
+        });
+      } catch (error) {
+        this.notify.error(this.l10n.t(error.error));
+      }
     },
 
-    openOTPController() {
+    async openOTPController(mobileNumber) {
       // Modal controller for OTP step
-      this.setProperties({
-        'isPaytmModalOpen' : false,
-        'isOTPModalOpen'   : true
-      });
+      try {
+        const payload = {
+          'data': {
+            'phone': mobileNumber
+          }
+        };
+        await this.loader.post(`orders/${this.model.order.identifier}/paytm/send_otp/${this.txnToken}`, payload);
+        this.setProperties({
+          'isPaytmModalOpen' : false,
+          'isOTPModalOpen'   : true
+        });
+      } catch (error) {
+        this.notify.error(this.l10n.t(error.error));
+      }
+    },
+
+    async verifyOtp(OTP) {
+      try {
+        const payload = {
+          'data': {
+            'otp': OTP
+          }
+        };
+        await this.loader.post(`orders/${this.model.order.identifier}/paytm/validate_otp/${this.txnToken}`, payload);
+        this.setProperties({
+          'isOTPModalOpen': false
+        });
+      } catch (error) {
+        this.notify.error(this.l10n.t(error.error));
+      }
     },
+
     processStripeToken(token) {
       // Send this token to server to process payment
       this.set('isLoading', true);

app/templates/components/modals/paytm-otp.hbs

@@ -14,7 +14,7 @@
   <button type="button" class="ui black button" {{action 'close'}}>
     {{t 'Cancel'}}
   </button>
-  <button class="ui green button">
+  <button {{action verifyOtp otp}} class="ui green button">
     {{t 'Verify'}}
   </button>
 </div>

app/templates/components/modals/paytm-payment-options.hbs

@@ -26,7 +26,7 @@
   <button type="button" class="ui black button" {{action 'close'}}>
     {{t 'Cancel'}}
   </button>
-  <button {{action openOTPController}} class="ui green button" disabled={{not isWalletSelected}}>
+  <button {{action openOTPController mobileNumber}} class="ui green button" disabled={{not isWalletSelected}}>
     {{t 'Proceed'}}
   </button>
 </div>

app/templates/orders/pending.hbs

@@ -80,5 +80,5 @@
     </div>
   </div>
 </div>
-{{modals/paytm-payment-options isLoading=isLoading isOpen=isPaytmModalOpen amount=model.order.amount currency=model.order.event.paymentCurrency openOTPController=(action 'openOTPController')}}
-{{modals/paytm-otp isLoading=isLoading isOpen=isOTPModalOpen amount=model.order.amount currency=model.order.event.paymentCurrency}}
+{{modals/paytm-payment-options isLoading=isLoading isOpen=isPaytmModalOpen amount=model.order.amount currency=model.order.event.paymentCurrency openOTPController=(action 'openOTPController') txnToken=txnToken}}
+{{modals/paytm-otp isLoading=isLoading isOpen=isOTPModalOpen amount=model.order.amount currency=model.order.event.paymentCurrency txnToken=txnToken verifyOtp=(action 'verifyOtp')}}