pie-react-native/components/PsVerification.js

[![npm download][download-image]][download-url]

import React, { Component } from 'react'
import { View, Text, TextInput, StyleSheet } from 'react-native'
import { Button } from 'react-native-elements'

import CommonStyles from '../assets/styles/common'
import Colors from '../assets/literals/colors'

export default class PsVerification extends Component {

  constructor(props) {
    super(props)
    this.state = {
      authValue: ''
    }
  }

  render() {
    let { onSubmit, sentData, transactionData } = this.props
    return (
      <View>
        <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', padding: 15, alignItems: 'center' }}>
          <Text style={[CommonStyles.text]}>Please enter the OTP sent to you</Text>
        </View>
        <View>
          <TextInput
            style={[styles.input, styles.marginRight, styles.marginLeft]}
            value={this.state.CCname}
            underlineColorAndroid="transparent"
            placeholder="OTP"
            placeholderTextColor="#666666"
            selectionColor="#666666"
            keyboardType="phone-pad"
            maxLength={6}
            onChangeText={(authValue) => this.setState({authValue})} />
        </View>
        <View>
          <Button
            borderRadius={6}
            color={Colors.white}
            buttonStyle={{ backgroundColor: Colors.primaryColor, marginTop: 15 }}
            onPress={() => onSubmit(this.state)}
            title={`Confirm payment of ${sentData.currencySign}${sentData.amount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}`} />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  input: {
    marginTop: 5,
    height: 40,
    borderColor: Colors.accent,
    borderWidth: 1,
    backgroundColor: Colors.inputBackground,
    borderRadius: 6,
    padding: 6.5
  },
  marginLeft: {
    marginLeft: 15,
  },
  marginRight: {
    marginRight: 15,
  }
})