Checkpoint commit. IOS UI issues fixed.
This commit is contained in:
parent
1c20e44bb2
commit
89ba46c19a
|
@ -1,7 +1,7 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {useEffect, useState, useRef} from 'react';
|
import { useState, useRef} from 'react';
|
||||||
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, TouchableWithoutFeedback, ActivityIndicator, Alert, KeyboardAvoidingView } from 'react-native'
|
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
|
||||||
import { Card, ListItem, Button, Icon, Divider, Input, Overlay, CheckBox } from 'react-native-elements'
|
import { Button, Icon, Divider, Input } from 'react-native-elements'
|
||||||
import {ActionSheet} from 'native-base';
|
import {ActionSheet} from 'native-base';
|
||||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||||
import DateTimePickerModal from "react-native-modal-datetime-picker";
|
import DateTimePickerModal from "react-native-modal-datetime-picker";
|
||||||
|
|
|
@ -192,7 +192,7 @@ class CustomHeader extends React.Component {
|
||||||
</View>
|
</View>
|
||||||
</ImageBackground>
|
</ImageBackground>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ interface Props {
|
||||||
const Tabs = (props: Props) => {
|
const Tabs = (props: Props) => {
|
||||||
const layout = useWindowDimensions();
|
const layout = useWindowDimensions();
|
||||||
|
|
||||||
const [index, setIndex ] = useState(0);
|
const [index, setIndex ] = useState(props.tab || 0);
|
||||||
|
|
||||||
const renderScene = props.renderScene;
|
const renderScene = props.renderScene;
|
||||||
const routes = props.routes;
|
const routes = props.routes;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Stylesheet, Dimensions} from 'react-native';
|
import {Platform, Dimensions} from 'react-native';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
|
@ -85,10 +85,13 @@ const formatter = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const platform = Platform.OS;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
colors,
|
colors,
|
||||||
screen,
|
screen,
|
||||||
font,
|
font,
|
||||||
card,
|
card,
|
||||||
formatter
|
formatter,
|
||||||
|
platform
|
||||||
}
|
}
|
|
@ -165,7 +165,6 @@ class AddAccountCard extends React.PureComponent {
|
||||||
color={this.props.app_theme?.theme.colors.text}
|
color={this.props.app_theme?.theme.colors.text}
|
||||||
visible={this.state.loading} />
|
visible={this.state.loading} />
|
||||||
<CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
|
<CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
|
||||||
<Container>
|
|
||||||
<View style={{flex: 1}}>
|
<View style={{flex: 1}}>
|
||||||
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
|
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
|
||||||
<Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
|
<Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
|
||||||
|
@ -173,7 +172,7 @@ class AddAccountCard extends React.PureComponent {
|
||||||
<View style={{flex: 1, alignItems: 'center'}}>
|
<View style={{flex: 1, alignItems: 'center'}}>
|
||||||
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text>
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text>
|
||||||
<Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
<Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
||||||
Enter you 16-digit card number.
|
Enter your 16-digit card number.
|
||||||
</Text>
|
</Text>
|
||||||
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
|
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
@ -199,7 +198,6 @@ class AddAccountCard extends React.PureComponent {
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</Container>
|
|
||||||
</CustomSafeArea>
|
</CustomSafeArea>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -253,11 +253,12 @@ class About extends React.PureComponent {
|
||||||
style={{width: '100%', height: '85%', resizeMode: 'contain'}}
|
style={{width: '100%', height: '85%', resizeMode: 'contain'}}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<Container style={{height: 100}}>
|
<View style={{flex: 1}}>
|
||||||
<View>
|
<View>
|
||||||
<View style={{flexDirection: 'row', padding: 20}}>
|
<View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
|
||||||
<View style={{flex: 1}}>
|
<View>
|
||||||
<NBImage
|
<NBImage
|
||||||
|
style={{height: 50, width: 50, marginRight: 10}}
|
||||||
source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
|
source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
@ -286,7 +287,7 @@ class About extends React.PureComponent {
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{this.renderAccount()}
|
{this.renderAccount()}
|
||||||
</Container>
|
</View>
|
||||||
{this.state.accounts.length < 5 ?
|
{this.state.accounts.length < 5 ?
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -6,11 +6,14 @@ import {
|
||||||
View,
|
View,
|
||||||
Text,
|
Text,
|
||||||
Image,
|
Image,
|
||||||
Alert
|
Alert,
|
||||||
|
Keyboard
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import {
|
import {
|
||||||
FormControl,
|
FormControl,
|
||||||
Input,
|
Input,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
ScrollView,
|
||||||
Stack
|
Stack
|
||||||
} from 'native-base';
|
} from 'native-base';
|
||||||
import CustomHeader from '../../../components/header.js';
|
import CustomHeader from '../../../components/header.js';
|
||||||
|
@ -58,6 +61,9 @@ class ApplyCardDetails extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.card = props.route.params || {}
|
this.card = props.route.params || {}
|
||||||
|
|
||||||
|
this.keyboardOpenListener = null;
|
||||||
|
this.keyboardCloseListener = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -73,7 +79,6 @@ class ApplyCardDetails extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
init = async () => {
|
init = async () => {
|
||||||
|
@ -128,60 +133,68 @@ class ApplyCardDetails extends React.Component {
|
||||||
return (
|
return (
|
||||||
<CustomSafeArea>
|
<CustomSafeArea>
|
||||||
<CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
|
<CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
|
||||||
<View style={{flex: 1}}>
|
<KeyboardAvoidingView
|
||||||
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
|
style={{flex: 1}}
|
||||||
<View style={{padding: 10, width: '100%'}}>
|
behavior='padding'
|
||||||
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .32, borderRadius: 10}} />
|
keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
|
||||||
</View>
|
>
|
||||||
<Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
|
<ScrollView contentContainerStyle={{height: Theme.screen.h * .85}}>
|
||||||
{this.card.name}
|
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
|
||||||
</Text>
|
<View style={{padding: 10, width: '100%'}}>
|
||||||
<Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
|
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .28, borderRadius: 10}} />
|
||||||
{this.card.description}
|
</View>
|
||||||
</Text>
|
<Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
|
||||||
|
{this.card.name}
|
||||||
|
</Text>
|
||||||
|
<Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
|
||||||
|
{this.card.description}
|
||||||
|
</Text>
|
||||||
|
|
||||||
<View style={{flex: 1, width: '100%'}}>
|
<View style={{flex: 1, width: '100%'}}>
|
||||||
<View style={{width: '100%', opacity: this.handleShowForm()}}>
|
<View style={{width: '100%', opacity: this.handleShowForm()}}>
|
||||||
<View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
|
<View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
|
||||||
<Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
|
<Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
|
||||||
{/* <View style={{flexDirection: 'row'}}>
|
{/* <View style={{flexDirection: 'row'}}>
|
||||||
<Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
|
<Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
|
||||||
{this.card.id_number_description ? this.card.id_number_description : ""}
|
{this.card.id_number_description ? this.card.id_number_description : ""}
|
||||||
</Text>
|
</Text>
|
||||||
<TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
|
<TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
|
||||||
<Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
|
<Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View> */}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
|
||||||
|
<Stack>
|
||||||
|
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
|
||||||
|
<Input
|
||||||
|
style={{ color: this.props.app_theme?.theme.colors.text }}
|
||||||
|
placeholder="ID Number"
|
||||||
|
value={this.state.cardid || ""}
|
||||||
|
onChangeText={(value) => {
|
||||||
|
this.setState({ cardid: value })
|
||||||
|
if(value != "") this.setState({ valid: true })
|
||||||
|
else this.setState({ valid: false })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</FormControl>
|
||||||
|
<View style={{flex: 1, justifyContent: 'flex-end'}}>
|
||||||
|
{
|
||||||
|
this.state.canProceed ?
|
||||||
|
<TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
|
||||||
|
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
|
||||||
|
</TouchableOpacity> :
|
||||||
|
<TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
|
||||||
|
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View> */}
|
}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
|
|
||||||
<Stack>
|
|
||||||
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
|
|
||||||
<Input
|
|
||||||
style={{ color: this.props.app_theme?.theme.colors.text }}
|
|
||||||
placeholder="ID Number"
|
|
||||||
value={this.state.cardid || ""}
|
|
||||||
onChangeText={(value) => {
|
|
||||||
this.setState({ cardid: value })
|
|
||||||
if(value != "") this.setState({ valid: true })
|
|
||||||
else this.setState({ valid: false })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
</FormControl>
|
|
||||||
{
|
|
||||||
this.state.canProceed ?
|
|
||||||
<TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
|
|
||||||
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
|
|
||||||
</TouchableOpacity> :
|
|
||||||
<TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
|
|
||||||
<Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
}
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</ScrollView>
|
||||||
</View>
|
</KeyboardAvoidingView>
|
||||||
</CustomSafeArea>
|
</CustomSafeArea>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,7 @@ import moment from 'moment';
|
||||||
import DB from '../../../components/storage/';
|
import DB from '../../../components/storage/';
|
||||||
import REQUEST from '../../../components/api/';
|
import REQUEST from '../../../components/api/';
|
||||||
import CustomSafeArea from '../../../components/safeArea.component.js';
|
import CustomSafeArea from '../../../components/safeArea.component.js';
|
||||||
|
import { KeyboardAvoidingView } from 'native-base';
|
||||||
|
|
||||||
const CustomInput = (props) => {
|
const CustomInput = (props) => {
|
||||||
|
|
||||||
|
@ -394,130 +395,136 @@ class ApplyForm extends React.Component {
|
||||||
onCancel={() => this.setState({ datepicker: false })}
|
onCancel={() => this.setState({ datepicker: false })}
|
||||||
/>
|
/>
|
||||||
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
||||||
<ScrollView>
|
<KeyboardAvoidingView
|
||||||
<View style={{flex: 1}}>
|
style={{flex: 1}}
|
||||||
<View style={{flex: 1, alignItems: 'center'}}>
|
behavior="padding"
|
||||||
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
|
keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
|
||||||
<Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
>
|
||||||
Fill out the remaining forms and you're good to go!
|
<ScrollView>
|
||||||
</Text>
|
<View style={{flex: 1}}>
|
||||||
<CustomInput
|
<View style={{flex: 1, alignItems: 'center'}}>
|
||||||
title="First Name"
|
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
|
||||||
value={this.state.fname}
|
<Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
|
||||||
index={1}
|
Fill out the remaining forms and you're good to go!
|
||||||
current={this.state.activeInput}
|
</Text>
|
||||||
keyboardType={'ascii-capable'}
|
<CustomInput
|
||||||
textColor={this.props.app_theme?.theme.colors.text}
|
title="First Name"
|
||||||
isDarkMode={this.props.app_theme?.theme.dark}
|
value={this.state.fname}
|
||||||
focus={this.state.focus}
|
index={1}
|
||||||
error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
|
current={this.state.activeInput}
|
||||||
errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
|
keyboardType={'ascii-capable'}
|
||||||
onFocus={() => {
|
textColor={this.props.app_theme?.theme.colors.text}
|
||||||
this.setState({ activeInput: 1, focus: true })
|
isDarkMode={this.props.app_theme?.theme.dark}
|
||||||
}}
|
focus={this.state.focus}
|
||||||
onChangeText={this.onChangeTextValueFirstname}
|
error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
|
||||||
/>
|
errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
|
||||||
<CustomInput
|
onFocus={() => {
|
||||||
top={50}
|
this.setState({ activeInput: 1, focus: true })
|
||||||
title="Last Name"
|
}}
|
||||||
value={this.state.lname}
|
onChangeText={this.onChangeTextValueFirstname}
|
||||||
index={2}
|
/>
|
||||||
current={this.state.activeInput}
|
<CustomInput
|
||||||
keyboardType={'ascii-capable'}
|
top={50}
|
||||||
textColor={this.props.app_theme?.theme.colors.text}
|
title="Last Name"
|
||||||
isDarkMode={this.props.app_theme?.theme.dark}
|
value={this.state.lname}
|
||||||
focus={this.state.focus}
|
index={2}
|
||||||
error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
|
current={this.state.activeInput}
|
||||||
errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
|
keyboardType={'ascii-capable'}
|
||||||
onFocus={() => {
|
textColor={this.props.app_theme?.theme.colors.text}
|
||||||
this.setState({ activeInput: 2, focus: true })
|
isDarkMode={this.props.app_theme?.theme.dark}
|
||||||
}}
|
focus={this.state.focus}
|
||||||
onChangeText={this.onChangeTextValueLastname}
|
error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
|
||||||
/>
|
errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
|
||||||
<CustomInput
|
onFocus={() => {
|
||||||
top={50}
|
this.setState({ activeInput: 2, focus: true })
|
||||||
title="Email Address"
|
}}
|
||||||
value={this.state.email}
|
onChangeText={this.onChangeTextValueLastname}
|
||||||
index={3}
|
/>
|
||||||
current={this.state.activeInput}
|
<CustomInput
|
||||||
focus={this.state.focus}
|
top={50}
|
||||||
textColor={this.props.app_theme?.theme.colors.text}
|
title="Email Address"
|
||||||
isDarkMode={this.props.app_theme?.theme.dark}
|
value={this.state.email}
|
||||||
error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
|
index={3}
|
||||||
errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
|
current={this.state.activeInput}
|
||||||
onFocus={() => {
|
focus={this.state.focus}
|
||||||
this.setState({ activeInput: 3, focus: true })
|
textColor={this.props.app_theme?.theme.colors.text}
|
||||||
}}
|
isDarkMode={this.props.app_theme?.theme.dark}
|
||||||
onChangeText={(val) => {
|
error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
|
||||||
this.setState({ email: val })
|
errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
|
||||||
}}
|
onFocus={() => {
|
||||||
/>
|
this.setState({ activeInput: 3, focus: true })
|
||||||
|
}}
|
||||||
|
onChangeText={(val) => {
|
||||||
|
this.setState({ email: val })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}>
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}>
|
||||||
<View style={{flex: 1}}>
|
<View style={{flex: 1}}>
|
||||||
{this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
|
{this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
this.setState({ focus: true, activeInput: 4, datepicker: true })
|
this.setState({ focus: true, activeInput: 4, datepicker: true })
|
||||||
if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
|
if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
|
||||||
}}>
|
}}>
|
||||||
<View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
|
<View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
|
||||||
<Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text>
|
<Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
|
||||||
{this.state.errors && this.state.errors.birthdate ?
|
|
||||||
<Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
|
|
||||||
{this.state.errors?.birthdate[0]}
|
|
||||||
</Text> : null}
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<CustomInput
|
|
||||||
top={50}
|
|
||||||
index={5}
|
|
||||||
current={this.state.activeInput}
|
|
||||||
focus={this.state.focus}
|
|
||||||
title="Mobile Number"
|
|
||||||
value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
|
|
||||||
keyboardType="numeric"
|
|
||||||
maxlength={13}
|
|
||||||
textColor={this.props.app_theme?.theme.colors.text}
|
|
||||||
isDarkMode={this.props.app_theme?.theme.dark}
|
|
||||||
error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
|
|
||||||
errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
|
|
||||||
onFocus={() => {
|
|
||||||
this.setState({ activeInput: 5, focus: true })
|
|
||||||
if(this.state.number == null) this.setState({ number: '+63' })
|
|
||||||
}}
|
|
||||||
onChangeText={(val) => {
|
|
||||||
this.setState({ number: val, errors: null })
|
|
||||||
if(this.state.agree){
|
|
||||||
if(val.length < 13) this.setState({ valid: false })
|
|
||||||
else if(val.length == 13) this.setState({ valid: true })
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
|
|
||||||
<TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
|
|
||||||
{!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
|
|
||||||
</TouchableOpacity>
|
|
||||||
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
|
|
||||||
<View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
|
|
||||||
<Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
|
|
||||||
<TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
|
|
||||||
<Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
|
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
{this.state.errors && this.state.errors.birthdate ?
|
||||||
|
<Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
|
||||||
|
{this.state.errors?.birthdate[0]}
|
||||||
|
</Text> : null}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
|
||||||
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
|
<CustomInput
|
||||||
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
|
top={50}
|
||||||
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
|
index={5}
|
||||||
</TouchableOpacity>
|
current={this.state.activeInput}
|
||||||
|
focus={this.state.focus}
|
||||||
|
title="Mobile Number"
|
||||||
|
value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
|
||||||
|
keyboardType="numeric"
|
||||||
|
maxlength={13}
|
||||||
|
textColor={this.props.app_theme?.theme.colors.text}
|
||||||
|
isDarkMode={this.props.app_theme?.theme.dark}
|
||||||
|
error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
|
||||||
|
errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
|
||||||
|
onFocus={() => {
|
||||||
|
this.setState({ activeInput: 5, focus: true })
|
||||||
|
if(this.state.number == null) this.setState({ number: '+63' })
|
||||||
|
}}
|
||||||
|
onChangeText={(val) => {
|
||||||
|
this.setState({ number: val, errors: null })
|
||||||
|
if(this.state.agree){
|
||||||
|
if(val.length < 13) this.setState({ valid: false })
|
||||||
|
else if(val.length == 13) this.setState({ valid: true })
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}>
|
||||||
|
<TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
|
||||||
|
{!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
|
||||||
|
<View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
|
||||||
|
<Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
|
||||||
|
<TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
|
||||||
|
<Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
|
||||||
|
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
|
||||||
|
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</ScrollView>
|
||||||
</ScrollView>
|
</KeyboardAvoidingView>
|
||||||
</CustomSafeArea>
|
</CustomSafeArea>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export default function SearchBar(props){
|
||||||
<Icon.Ionicons name="md-search" size={22} color={props.textColor} />
|
<Icon.Ionicons name="md-search" size={22} color={props.textColor} />
|
||||||
</View>
|
</View>
|
||||||
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}>
|
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}>
|
||||||
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} />
|
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for a station name" placeholderTextColor={Theme.colors.lightGray} />
|
||||||
</View>
|
</View>
|
||||||
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
|
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
|
||||||
<Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} />
|
<Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} />
|
||||||
|
|
|
@ -134,7 +134,7 @@ class Stations extends React.Component {
|
||||||
<Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
|
<Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
|
||||||
</View>
|
</View>
|
||||||
<View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
|
<View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
|
||||||
<TextInput style={{fontSize: 17}} placeholder="Search for city" />
|
<TextInput style={{fontSize: 17}} placeholder="Search for a station name" />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
@ -166,120 +166,6 @@ class Stations extends React.Component {
|
||||||
|
|
||||||
export default Stations
|
export default Stations
|
||||||
|
|
||||||
// export default function Stations(navigation) {
|
|
||||||
|
|
||||||
// const [loading, setloading] = useState(false)
|
|
||||||
// const [panel, setpanel] = useState(null)
|
|
||||||
// const [showPanel, setshowpanel] = useState(false)
|
|
||||||
// const [session, setsession] = useState(null)
|
|
||||||
// const [stations, setstations] = useState([])
|
|
||||||
// const [initialRegion, setinitialRegion] = useState({
|
|
||||||
// latitude: 14.599512,
|
|
||||||
// longitude: 120.984222,
|
|
||||||
// latitudeDelta: 0.0922,
|
|
||||||
// longitudeDelta: 0.0421,
|
|
||||||
// })
|
|
||||||
// const [mylocation, setmylocation] = useState({})
|
|
||||||
|
|
||||||
// const fetch = async () => {
|
|
||||||
// setloading(true)
|
|
||||||
// panel.hide()
|
|
||||||
// let session = await DB.session()
|
|
||||||
// await setsession(session)
|
|
||||||
// REQUEST('gas_stations', 'post', {
|
|
||||||
// Authorization: session.token
|
|
||||||
// }, {}, {
|
|
||||||
// lcard_uuid: session.user.lcard_uuid,
|
|
||||||
// longitude: mylocation.longitude,
|
|
||||||
// latitude: mylocation.latitude
|
|
||||||
// }, function(res){
|
|
||||||
// setloading(false)
|
|
||||||
// setstations(res.data)
|
|
||||||
// panel.show()
|
|
||||||
// updateRegion()
|
|
||||||
// }, function(e){
|
|
||||||
// console.log(e)
|
|
||||||
// setloading(false)
|
|
||||||
// })
|
|
||||||
// setloading(false)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const updateRegion = () => {
|
|
||||||
// if(stations.length > 0){
|
|
||||||
// let region = initialRegion
|
|
||||||
// region.latitude = parseFloat(stations[0].latitude)
|
|
||||||
// region.longitude = parseFloat(stations[0].longitude)
|
|
||||||
// region.latitudeDelta = 0.00700
|
|
||||||
// region.longitudeDelta = 0.00100
|
|
||||||
// setinitialRegion(region)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const init = async () => {
|
|
||||||
// Geolocation.getCurrentPosition(info => setmylocation(info.coords) );
|
|
||||||
// // if(!mylocation.accuracy){
|
|
||||||
// // alert("Location is disabled")
|
|
||||||
// // return
|
|
||||||
// // }
|
|
||||||
// fetch()
|
|
||||||
// }
|
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// init()
|
|
||||||
// }, [])
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <SafeAreaView style={{flex: 1}}>
|
|
||||||
// <CustomHeader title="Stations" menu={true} navigation={navigation} />
|
|
||||||
|
|
||||||
// <View style={styles.mapContainer}>
|
|
||||||
// <MapView
|
|
||||||
// provider={PROVIDER_GOOGLE}
|
|
||||||
// loadingEnabled={true}
|
|
||||||
// style={styles.map}
|
|
||||||
// showsUserLocation={true}
|
|
||||||
// region={initialRegion}
|
|
||||||
// />
|
|
||||||
// </View>
|
|
||||||
|
|
||||||
// <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
|
|
||||||
// <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
||||||
// <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
|
|
||||||
// <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
|
|
||||||
// </View>
|
|
||||||
// <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
|
|
||||||
// <TextInput style={{fontSize: 17}} placeholder="Search for city" />
|
|
||||||
// </View>
|
|
||||||
// </View>
|
|
||||||
// </View>
|
|
||||||
|
|
||||||
// {/* <View style={ showPanel ? {...styles.panelActiveContainer} : {...styles.panelInctiveContainer}}> */}
|
|
||||||
// <View style={styles.panelInctiveContainer}>
|
|
||||||
// <SlidingUpPanel
|
|
||||||
// ref={c => setpanel(c)}
|
|
||||||
// backdropOpacity={1}
|
|
||||||
// allowDragging={true}
|
|
||||||
// showBackdrop={false}
|
|
||||||
// draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
|
|
||||||
// <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
|
|
||||||
// <TouchableOpacity activeOpacity={1} onPress={() => setshowpanel(true)} style={{ width: '100%', height: 60, top: -70}}>
|
|
||||||
// <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
|
|
||||||
// <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {stations.length}</Text>
|
|
||||||
// <View style={{flex: 0}}>{loading ? <ActivityIndicator color="gray" /> : null}</View>
|
|
||||||
// </View>
|
|
||||||
// </TouchableOpacity>
|
|
||||||
// <ScrollView>
|
|
||||||
// {renderStations(stations)}
|
|
||||||
// <View style={{height: Theme.screen.h}}></View>
|
|
||||||
// </ScrollView>
|
|
||||||
|
|
||||||
// </View>
|
|
||||||
// </SlidingUpPanel>
|
|
||||||
// </View>
|
|
||||||
// </SafeAreaView>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
mapContainer: {
|
mapContainer: {
|
||||||
...StyleSheet.absoluteFillObject,
|
...StyleSheet.absoluteFillObject,
|
||||||
|
|
|
@ -5,9 +5,12 @@ import {
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
ScrollView,
|
ScrollView,
|
||||||
Alert,
|
Alert,
|
||||||
Dimensions } from 'react-native';
|
Dimensions,
|
||||||
|
KeyboardAvoidingView} from 'react-native';
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
|
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
|
||||||
|
import Icon from '../../components/icons.js';
|
||||||
|
import CustomHeader from '../../components/header.js';
|
||||||
import Crypto from '../../components/crypto.js';
|
import Crypto from '../../components/crypto.js';
|
||||||
import Elements from '../../components/elements.js';
|
import Elements from '../../components/elements.js';
|
||||||
import NetInfo from "../../components/netstatus";
|
import NetInfo from "../../components/netstatus";
|
||||||
|
@ -149,13 +152,21 @@ class Setmpin extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return(
|
return(
|
||||||
<CustomSafeArea>
|
<CustomSafeArea>
|
||||||
<View>
|
{/* <View style={{flexDirection: 'row', backgroundColor: Theme.colors.primary}}>
|
||||||
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
|
<View style={{flex: .5, justifyContent: 'center'}}>
|
||||||
|
<TouchableOpacity style={{height: 40, width: 40, alignItems: 'center', justifyContent: 'center', borderWidth: 1}} onPress={() => this.props.navigation.goBack()}>
|
||||||
|
<Icon.AntDesign name={"arrowleft"} size={20} style={{color: "#FFF"}} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
<View style={{flex: 1, flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
|
||||||
<View style={{flex:3, justifyContent: 'center'}}>
|
<View style={{flex:3, justifyContent: 'center'}}>
|
||||||
<Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}>Set your mobile PIN</Text>
|
<Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}>Set your mobile PIN</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
<View style={{flex: .5}} />
|
||||||
|
</View> */}
|
||||||
|
<CustomHeader title="Set your mobile PIN" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
|
||||||
|
|
||||||
<Elements.loaderView
|
<Elements.loaderView
|
||||||
title="Validating"
|
title="Validating"
|
||||||
message="Please wait..."
|
message="Please wait..."
|
||||||
|
@ -163,33 +174,39 @@ class Setmpin extends React.Component {
|
||||||
backgroundColor={this.props.app_theme?.theme.colors.border}
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
||||||
color={this.props.app_theme?.theme.colors.text}
|
color={this.props.app_theme?.theme.colors.text}
|
||||||
visible={this.state.loading} />
|
visible={this.state.loading} />
|
||||||
<ScrollView style={{ flex: 1 }}>
|
<KeyboardAvoidingView
|
||||||
<View style={{ flex: 1, marginTop: 45, }}>
|
style={{flex: 1}}
|
||||||
<Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text>
|
behavior='padding'
|
||||||
<View style={{ flex: 1, alignItems: 'center' }}>
|
keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
|
||||||
<Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text>
|
>
|
||||||
<CustomOTPInput
|
<ScrollView style={{ flex: 1 }}>
|
||||||
containerStyle={{ marginBottom: 30 }}
|
<View style={{ flex: 1, marginTop: 45, }}>
|
||||||
secureTextEntry={true}
|
<Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text>
|
||||||
textColor={this.props.app_theme?.theme.colors.text}
|
<View style={{ flex: 1, alignItems: 'center' }}>
|
||||||
isDarkMode={this.props.app_theme?.theme.dark}
|
<Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text>
|
||||||
onChangeText={(v) => {
|
<CustomOTPInput
|
||||||
this.setState({ mpin: v, valid: v.length == 4 ? true : false })
|
containerStyle={{ marginBottom: 30 }}
|
||||||
}}/>
|
secureTextEntry={true}
|
||||||
<Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
|
textColor={this.props.app_theme?.theme.colors.text}
|
||||||
<CustomOTPInput
|
isDarkMode={this.props.app_theme?.theme.dark}
|
||||||
secureTextEntry={true}
|
onChangeText={(v) => {
|
||||||
textColor={this.props.app_theme?.theme.colors.text}
|
this.setState({ mpin: v, valid: v.length == 4 ? true : false })
|
||||||
isDarkMode={this.props.app_theme?.theme.dark}
|
}}/>
|
||||||
onChangeText={(v) => {
|
<Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
|
||||||
this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
|
<CustomOTPInput
|
||||||
}}/>
|
secureTextEntry={true}
|
||||||
{(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
|
textColor={this.props.app_theme?.theme.colors.text}
|
||||||
<Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
|
isDarkMode={this.props.app_theme?.theme.dark}
|
||||||
)}
|
onChangeText={(v) => {
|
||||||
</View>
|
this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
|
||||||
</View>
|
}}/>
|
||||||
</ScrollView>
|
{(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
|
||||||
|
<Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
<TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}>
|
<TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}>
|
||||||
<Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text>
|
<Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
|
@ -80,8 +80,8 @@ class MyCard extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
<View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
||||||
<View style={{flex: 1, width: '100%', height: 250, padding: 15, borderRadius: 15}}>
|
<View style={{flex: 1, padding: 15, borderRadius: 15}}>
|
||||||
<ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: '100%', resizeMode: 'stretch', overflow: 'hidden', borderRadius: 15}} >
|
<ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: Theme.screen.h * .3, overflow: 'hidden', borderRadius: 15}} >
|
||||||
<View style={{marginTop: '32%'}}>
|
<View style={{marginTop: '32%'}}>
|
||||||
<Text style={{fontSize: 15, paddingLeft: 5, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text>
|
<Text style={{fontSize: 15, paddingLeft: 5, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text>
|
||||||
<Text style={{fontSize: 15, paddingLeft: 5,fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text>
|
<Text style={{fontSize: 15, paddingLeft: 5,fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text>
|
||||||
|
|
|
@ -64,11 +64,13 @@ class MyProfile extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { tab } = this.props.route.params;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomSafeArea>
|
<CustomSafeArea>
|
||||||
<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
|
<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
|
||||||
<Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
<Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
||||||
<Tabs renderScene={this.sceneMap()} routes={this.routes()}/>
|
<Tabs tab={tab} renderScene={this.sceneMap()} routes={this.routes()}/>
|
||||||
</Container>
|
</Container>
|
||||||
</CustomSafeArea>
|
</CustomSafeArea>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { SafeAreaView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
|
import { KeyboardAvoidingView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
|
||||||
import { Avatar } from 'react-native-elements';
|
import { Avatar } from 'react-native-elements';
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
|
import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
|
||||||
|
@ -466,6 +466,11 @@ class EditProfile extends React.PureComponent {
|
||||||
navigation={this.props.navigation}
|
navigation={this.props.navigation}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<KeyboardAvoidingView
|
||||||
|
style={{flex: 1}}
|
||||||
|
behavior="padding"
|
||||||
|
keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
|
||||||
|
>
|
||||||
<ScrollView style={{flex: 1}}>
|
<ScrollView style={{flex: 1}}>
|
||||||
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
||||||
<View style={{flex: 1}}>
|
<View style={{flex: 1}}>
|
||||||
|
@ -636,6 +641,7 @@ class EditProfile extends React.PureComponent {
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
</CustomSafeArea>
|
</CustomSafeArea>
|
||||||
<Elements.customAlert
|
<Elements.customAlert
|
||||||
open={this.state.openModal}
|
open={this.state.openModal}
|
||||||
|
|
|
@ -11,7 +11,7 @@ export default function SearchBar(props){
|
||||||
<Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
<Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
||||||
</View>
|
</View>
|
||||||
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
<View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
||||||
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} />
|
<TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for a station name" placeholderTextColor={Theme.colors.lightGray} />
|
||||||
</View>
|
</View>
|
||||||
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
{props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
|
||||||
<Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
<Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
|
||||||
|
|
|
@ -53,8 +53,7 @@ const Tracker = (navigation) => {
|
||||||
return (
|
return (
|
||||||
<CustomSafeArea>
|
<CustomSafeArea>
|
||||||
<CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
|
<CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
|
||||||
<Container>
|
<View style={{marginTop: 20, padding: 0, alignItems: 'center'}}>
|
||||||
<View style={{marginTop: 20, padding: 0}}>
|
|
||||||
<CustomForm
|
<CustomForm
|
||||||
items={
|
items={
|
||||||
[
|
[
|
||||||
|
@ -108,7 +107,6 @@ const Tracker = (navigation) => {
|
||||||
style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
|
style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
|
||||||
<Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
|
<Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Elements.CustomDatePicker
|
<Elements.CustomDatePicker
|
||||||
visible={datepicker}
|
visible={datepicker}
|
||||||
|
|
|
@ -1065,7 +1065,7 @@
|
||||||
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
|
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
|
||||||
CODE_SIGN_IDENTITY = "Apple Development";
|
CODE_SIGN_IDENTITY = "Apple Development";
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 4;
|
CURRENT_PROJECT_VERSION = 5;
|
||||||
DEVELOPMENT_TEAM = J29MB7XX75;
|
DEVELOPMENT_TEAM = J29MB7XX75;
|
||||||
ENABLE_BITCODE = NO;
|
ENABLE_BITCODE = NO;
|
||||||
FRAMEWORK_SEARCH_PATHS = (
|
FRAMEWORK_SEARCH_PATHS = (
|
||||||
|
@ -1240,7 +1240,7 @@
|
||||||
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
|
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
|
||||||
CODE_SIGN_IDENTITY = "Apple Development";
|
CODE_SIGN_IDENTITY = "Apple Development";
|
||||||
CODE_SIGN_STYLE = Automatic;
|
CODE_SIGN_STYLE = Automatic;
|
||||||
CURRENT_PROJECT_VERSION = 4;
|
CURRENT_PROJECT_VERSION = 5;
|
||||||
DEVELOPMENT_TEAM = J29MB7XX75;
|
DEVELOPMENT_TEAM = J29MB7XX75;
|
||||||
FRAMEWORK_SEARCH_PATHS = (
|
FRAMEWORK_SEARCH_PATHS = (
|
||||||
"$(inherited)",
|
"$(inherited)",
|
||||||
|
|
Binary file not shown.
Loading…
Reference in New Issue