feat: redeem voucher

src/common/pages/Wallet/Modal/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {Link} from 'react-router';
-import { Modal, Input, Alert, Select } from 'antd';
+import { Modal, Input, Alert, Select, message } from 'antd';
 import './style.scss';
 import { Route } from 'react-router-dom'
 import {LINKS} from "../../../routes";
@@ -19,6 +19,7 @@ export default class ModalTopupComponent extends React.Component {
       inputCode2: '',
       inputCode3: '',
       inputCode4: '',
+      confirmLoading: false
     };
     this.defaultState = Object.assign({}, this.state);
   }
@@ -32,8 +33,35 @@ export default class ModalTopupComponent extends React.Component {
       <Modal
         title={title}
         visible={isVisible}
-        onOk={onOk}
+        onOk={async () => {
-        onCancel={onCancel}
+          this.setState({
+            confirmLoading: true
+          });
+          let voucherCode = this.state.inputCode1 + this.state.inputCode2 + this.state.inputCode3 + this.state.inputCode4;
+
+          try {
+            await this.props.appstate.wallet.redeemVoucherCode(voucherCode);
+            this.props.onOk();
+            message.info("Voucher redeem success");
+          } catch (e) {
+            message.error(e.message);
+          } finally {
+            this.setState({
+              confirmLoading: false
+            });
+          }
+
+        }}
+        onCancel={() => {
+          this.setState({
+            inputCode1: '',
+            inputCode2: '',
+            inputCode3: '',
+            inputCode4: ''
+          });
+          onCancel();
+        }}
+        confirmLoading={this.state.confirmLoading}
         bodyStyle={{
           display: 'flex',
           justifyContent: 'center',
@@ -46,7 +74,24 @@ export default class ModalTopupComponent extends React.Component {
             if(e.target.value.length === 4){
               this.inputCode2.focus();
             }
-          }} className={'inputCode'} placeholder="XXXX" />
+          }} className={'inputCode'} placeholder="XXXX" onPaste={(e) => {
+            let pasted = e.clipboardData.getData('Text');
+
+            let splittedSection = pasted.match(/.{1,4}/g);
+            console.log(splittedSection, 'splic');
+            if(splittedSection[3]) {
+              this.setState({inputCode4: splittedSection[3]})
+            }
+            if(splittedSection[2]) {
+              this.setState({inputCode3: splittedSection[2]})
+            }
+            if(splittedSection[1]) {
+              this.setState({inputCode2: splittedSection[1]})
+            }
+            if(splittedSection[0]) {
+              this.setState({inputCode1: splittedSection[0]})
+            }
+          }}/>
           <p className={'stripeText'}>-</p>
           <Input value={this.state.inputCode2} maxLength={4} ref={e => this.inputCode2 = e} onChange={(e) => {
             this.setState({inputCode2: e.target.value})

src/common/stores/wallet.js

@@ -25,4 +25,14 @@ export default class WalletStore {
         throw err;
       })
   }
+
+  @action
+  redeemVoucherCode(voucherCode) {
+    return this.http.post("wallet/redeem", {
+      unique_code: voucherCode
+    })
+      .then(res => {
+        this.getData();
+      });
+  }
 }