feat: Design PayTM gateway modals (#3447)

* feat: add paytm checkout modals

* feat: add validations to modals

Author: uds5501

app/components/modals/paytm-otp.js

@@ -0,0 +1,25 @@
+import ModalBase from 'open-event-frontend/components/modals/modal-base';
+import FormMixin from 'open-event-frontend/mixins/form';
+
+export default class extends ModalBase.extend(FormMixin) {
+  isSmall = true;
+
+  getValidationRules() {
+    return {
+      inline : true,
+      delay  : false,
+      on     : 'blur',
+      fields : {
+        otp: {
+          identifier : 'otp',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter the OTP')
+            }
+          ]
+        }
+      }
+    };
+  }
+}

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

@@ -0,0 +1,33 @@
+import ModalBase from 'open-event-frontend/components/modals/modal-base';
+import FormMixin from 'open-event-frontend/mixins/form';
+import { validPhoneNumber } from 'open-event-frontend/utils/validators';
+
+export default class extends ModalBase.extend(FormMixin) {
+  isSmall = true;
+  isWalletSelected = false;
+
+  getValidationRules() {
+    return {
+      inline : true,
+      delay  : false,
+      on     : 'blur',
+      fields : {
+        mobileNumber: {
+          identifier : 'mobile_number',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter the Mobile Number')
+            },
+            {
+              type   : 'regExp',
+              value  : validPhoneNumber,
+              prompt : this.l10n.t('Please enter a valid mobile number')
+            }
+          ]
+        }
+      }
+    };
+  }
+
+}

app/controllers/orders/pending.js

@@ -51,6 +51,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,20 @@
+<div class="header">
+  {{t 'Amount to be paid:'}} {{currency-symbol currency}} {{amount}}
+</div>
+
+<div class="content">
+  {{t 'Enter OTP sent to mobile number'}}
+  <form class="ui form" autocomplete="off">
+    <div class="field">
+      {{input type='number' id='otp' value=otp required=true}}
+    </div>
+  </form>
+</div>
+<div class="actions">
+  <button type="button" class="ui black button" {{action 'close'}}>
+    {{t 'Cancel'}}
+  </button>
+  <button class="ui green button">
+    {{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>
+  <form class="ui form" autocomplete="off" {{action 'openOTPController' on='submit' preventDefault=true}}>
+    <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' id='mobile_number' value=mobileNumber required=true}}
+      </div>
+    {{/if}}
+  </form>
+</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}}