feat: add paytm checkout modals

app/components/modals/paytm-otp.js

@@ -0,0 +1,11 @@
+// import { computed } from '@ember/object';
+import ModalBase from 'open-event-frontend/components/modals/modal-base';
+
+export default class extends ModalBase {
+  isSmall = true;
+
+  // @computed('this.otp')
+  // get isOTPvalid() {
+  //   return this.otp.length === 6;
+  // }
+}

app/components/modals/paytm-payment-options.js

@@ -0,0 +1,7 @@
+import ModalBase from 'open-event-frontend/components/modals/modal-base';
+
+export default class extends ModalBase {
+  isSmall = true;
+  isWalletSelected = false;
+  mobileNumber = '';
+}

app/controllers/orders/pending.js

@@ -47,6 +47,20 @@ export default Controller.extend({
         this.notify.error(this.l10n.t(error.error));
       }
     },
+    openPaytmModal() {
+      // Model controller for PaytmModal
+      this.setProperties({
+        'isPaytmModalOpen' : true
+      });
+    },
+
+    openOTPController() {
+      // Modal controller for OTP step
+      this.setProperties({
+        'isPaytmModalOpen' : false,
+        'isOTPModalOpen'   : true
+      });
+    },
     processStripeToken(token) {
       // Send this token to server to process payment
       this.set('isLoading', true);

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

@@ -0,0 +1,16 @@
+<div class="header">
+  {{t 'Amount to be paid:'}} {{currency-symbol currency}} {{amount}}
+</div>
+
+<div class="content">
+  {{t 'Enter OTP sent to mobile number'}}
+  <div class="ui {{if isLoading 'loading'}} form" autocomplete="off">
+    {{input type='number' name='otp' value=otp required=true}}
+  </div>
+</div>
+
+<div class="actions">
+  <button class="ui green button" disabled={{isOTPvalid}}>
+    {{t 'Verify'}}
+  </button>
+</div>

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

@@ -0,0 +1,32 @@
+<div class="header">
+  {{t 'Amount to be paid:'}} {{currency-symbol currency}} {{amount}}
+</div>
+
+<div class="content">
+  <div class="muted small text">
+    {{t 'Select an option to pay'}}
+  </div>
+  <div class="ui {{if isLoading 'loading'}} form" autocomplete="off" >
+    <div class="field">
+      {{ui-radio name='payment_mode' value='paytm' onChange=(action (mut isWalletSelected))}}
+      {{t 'Paytm Wallet'}}<img src="/images/payment-logos/paytm.png" alt="paytm"> 
+    </div>
+    {{#if isWalletSelected}}
+      <div class="field">
+        <div class="label">
+          {{t 'Please enter your Paytm registered Mobile Number to continue'}}
+        </div>
+        {{input type='number' name='mobile_number' value=mobileNumber required=true}}
+      </div>
+    {{/if}}
+  </div>
+</div>
+
+<div class="actions">
+  <button type="button" class="ui black button" {{action 'close'}}>
+    {{t 'Cancel'}}
+  </button>
+  <button {{action openOTPController}} class="ui green button" disabled={{not isWalletSelected}}>
+    {{t 'Proceed'}}
+  </button>
+</div>

app/templates/orders/pending.hbs

@@ -61,6 +61,9 @@
             </form>
           </div>
         {{/if}}
+        {{#if isPaytm}}
+          <button class="ui button primary" {{action "openPaytmModal"}}>{{t 'Pay with Paytm'}}</button>
+        {{/if}}
         {{#if isAliPay}}
           <button class="ui button primary" {{action alipayCheckout model.order.identifier}}>{{t 'Pay with AliPay'}}</button>          
         {{/if}}
@@ -77,3 +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}}