jannah
/
unioil-loyalty-rn-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkpoint commit. IOS UI issues fixed.

This commit is contained in:
Harley Catubag 2022-06-14 23:53:23 +08:00
parent 1c20e44bb2
commit 89ba46c19a
18 changed files with 275 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/elements.js
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import {useEffect, useState, useRef} from 'react';
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, TouchableWithoutFeedback, ActivityIndicator, Alert, KeyboardAvoidingView } from 'react-native'
import { Card, ListItem, Button, Icon, Divider, Input, Overlay, CheckBox } from 'react-native-elements'
import { useState, useRef} from 'react';
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
import { Button, Icon, Divider, Input } from 'react-native-elements'
import {ActionSheet} from 'native-base';
import DateTimePicker from '@react-native-community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker";

2
app/components/header.js
View File

@ -192,7 +192,7 @@ class CustomHeader extends React.Component {
</View>
</ImageBackground>
</View>
</View>
</View>
)
}
}

2
app/components/tab/Tabs.js
View File

@ -18,7 +18,7 @@ interface Props {
const Tabs = (props: Props) => {
const layout = useWindowDimensions();
const [index, setIndex ] = useState(0);
const [index, setIndex ] = useState(props.tab || 0);
const renderScene = props.renderScene;
const routes = props.routes;

7
app/components/theme.style.js
View File

@ -1,4 +1,4 @@
import {Stylesheet, Dimensions} from 'react-native';
import {Platform, Dimensions} from 'react-native';
import moment from 'moment';
const colors = {
@ -85,10 +85,13 @@ const formatter = {
}
}
const platform = Platform.OS;
export default {
colors,
screen,
font,
card,
formatter
formatter,
platform
}

4
app/screens/account/add.js
View File

@ -165,7 +165,6 @@ class AddAccountCard extends React.PureComponent {
color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} />
<CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
<Container>
<View style={{flex: 1}}>
<View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
<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'}}>
<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}}>
Enter you 16-digit card number.
Enter your 16-digit card number.
</Text>
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
<CustomInput
@ -199,7 +198,6 @@ class AddAccountCard extends React.PureComponent {
</View>
</View>
</View>
</Container>
</CustomSafeArea>
)
}

9
app/screens/account/index.js
View File

@ -253,11 +253,12 @@ class About extends React.PureComponent {
style={{width: '100%', height: '85%', resizeMode: 'contain'}}
/>
</View>
<Container style={{height: 100}}>
<View style={{flex: 1}}>
<View>
<View style={{flexDirection: 'row', padding: 20}}>
<View style={{flex: 1}}>
<View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
<View>
<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}
/>
</View>
@ -286,7 +287,7 @@ class About extends React.PureComponent {
</View>
{this.renderAccount()}
</Container>
</View>
{this.state.accounts.length < 5 ?
<View
style={{

115
app/screens/login/apply/details.js
View File

@ -6,11 +6,14 @@ import {
View,
Text,
Image,
Alert
Alert,
Keyboard
} from 'react-native';
import {
FormControl,
Input,
KeyboardAvoidingView,
ScrollView,
Stack
} from 'native-base';
import CustomHeader from '../../../components/header.js';
@ -58,6 +61,9 @@ class ApplyCardDetails extends React.Component {
constructor(props) {
super(props)
this.card = props.route.params || {}
this.keyboardOpenListener = null;
this.keyboardCloseListener = null;
}
state = {
@ -73,7 +79,6 @@ class ApplyCardDetails extends React.Component {
}
componentWillUnmount() {
}
init = async () => {
@ -128,60 +133,68 @@ class ApplyCardDetails extends React.Component {
return (
<CustomSafeArea>
<CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
<View style={{flex: 1}}>
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
<View style={{padding: 10, width: '100%'}}>
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .32, borderRadius: 10}} />
</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'}}>
{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>
<KeyboardAvoidingView
style={{flex: 1}}
behavior='padding'
keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
>
<ScrollView contentContainerStyle={{height: Theme.screen.h * .85}}>
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
<View style={{padding: 10, width: '100%'}}>
<Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .28, borderRadius: 10}} />
</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'}}>
{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={{width: '100%', opacity: this.handleShowForm()}}>
<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>
{/* <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}}>
{this.card.id_number_description ? this.card.id_number_description : ""}
</Text>
<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} />
<View style={{flex: 1, width: '100%'}}>
<View style={{width: '100%', opacity: this.handleShowForm()}}>
<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>
{/* <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}}>
{this.card.id_number_description ? this.card.id_number_description : ""}
</Text>
<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} />
</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>
</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>
</KeyboardAvoidingView>
</CustomSafeArea>
);
}

243
app/screens/login/apply/form.js
View File

@ -18,6 +18,7 @@ import moment from 'moment';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';
import { KeyboardAvoidingView } from 'native-base';
const CustomInput = (props) => {
@ -394,130 +395,136 @@ class ApplyForm extends React.Component {
onCancel={() => this.setState({ datepicker: false })}
/>
<CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
<ScrollView>
<View style={{flex: 1}}>
<View style={{flex: 1, alignItems: 'center'}}>
<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>
<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!
</Text>
<CustomInput
title="First Name"
value={this.state.fname}
index={1}
current={this.state.activeInput}
keyboardType={'ascii-capable'}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
focus={this.state.focus}
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] : ""}
onFocus={() => {
this.setState({ activeInput: 1, focus: true })
}}
onChangeText={this.onChangeTextValueFirstname}
/>
<CustomInput
top={50}
title="Last Name"
value={this.state.lname}
index={2}
current={this.state.activeInput}
keyboardType={'ascii-capable'}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
focus={this.state.focus}
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] : ""}
onFocus={() => {
this.setState({ activeInput: 2, focus: true })
}}
onChangeText={this.onChangeTextValueLastname}
/>
<CustomInput
top={50}
title="Email Address"
value={this.state.email}
index={3}
current={this.state.activeInput}
focus={this.state.focus}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
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 })
}}
/>
<KeyboardAvoidingView
style={{flex: 1}}
behavior="padding"
keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
>
<ScrollView>
<View style={{flex: 1}}>
<View style={{flex: 1, alignItems: 'center'}}>
<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>
<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!
</Text>
<CustomInput
title="First Name"
value={this.state.fname}
index={1}
current={this.state.activeInput}
keyboardType={'ascii-capable'}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
focus={this.state.focus}
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] : ""}
onFocus={() => {
this.setState({ activeInput: 1, focus: true })
}}
onChangeText={this.onChangeTextValueFirstname}
/>
<CustomInput
top={50}
title="Last Name"
value={this.state.lname}
index={2}
current={this.state.activeInput}
keyboardType={'ascii-capable'}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
focus={this.state.focus}
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] : ""}
onFocus={() => {
this.setState({ activeInput: 2, focus: true })
}}
onChangeText={this.onChangeTextValueLastname}
/>
<CustomInput
top={50}
title="Email Address"
value={this.state.email}
index={3}
current={this.state.activeInput}
focus={this.state.focus}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
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={{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}
<TouchableOpacity
onPress={() => {
this.setState({ focus: true, activeInput: 4, datepicker: true })
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}}>
<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>
</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>
<View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}>
<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}
<TouchableOpacity
onPress={() => {
this.setState({ focus: true, activeInput: 4, datepicker: true })
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}}>
<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>
</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 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>
<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>
</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>
</ScrollView>
</ScrollView>
</KeyboardAvoidingView>
</CustomSafeArea>
);
}

2
app/screens/main/station/fragments/searchbar.js
View File

@ -13,7 +13,7 @@ export default function SearchBar(props){
<Icon.Ionicons name="md-search" size={22} color={props.textColor} />
</View>
<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>
{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} />

116
app/screens/main/station/xindex.js
View File

@ -134,7 +134,7 @@ class Stations extends React.Component {
<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" />
<TextInput style={{fontSize: 17}} placeholder="Search for a station name" />
</View>
</View>
</View>
@ -166,120 +166,6 @@ class Stations extends React.Component {
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({
mapContainer: {
...StyleSheet.absoluteFillObject,

79
app/screens/mpin/setmpin.js
View File

@ -5,9 +5,12 @@ import {
TouchableOpacity,
ScrollView,
Alert,
Dimensions } from 'react-native';
Dimensions,
KeyboardAvoidingView} from 'react-native';
import { connect } from "react-redux";
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 Elements from '../../components/elements.js';
import NetInfo from "../../components/netstatus";
@ -149,13 +152,21 @@ class Setmpin extends React.Component {
render() {
return(
<CustomSafeArea>
<View>
<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={{flexDirection: 'row', backgroundColor: Theme.colors.primary}}>
<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'}}>
<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 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
title="Validating"
message="Please wait..."
@ -163,33 +174,39 @@ class Setmpin extends React.Component {
backgroundColor={this.props.app_theme?.theme.colors.border}
color={this.props.app_theme?.theme.colors.text}
visible={this.state.loading} />
<ScrollView style={{ flex: 1 }}>
<View style={{ flex: 1, marginTop: 45, }}>
<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>
<View style={{ flex: 1, alignItems: 'center' }}>
<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
containerStyle={{ marginBottom: 30 }}
secureTextEntry={true}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(v) => {
this.setState({ mpin: v, valid: v.length == 4 ? true : false })
}}/>
<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>
<CustomOTPInput
secureTextEntry={true}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(v) => {
this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
}}/>
{(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
style={{flex: 1}}
behavior='padding'
keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
>
<ScrollView style={{ flex: 1 }}>
<View style={{ flex: 1, marginTop: 45, }}>
<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>
<View style={{ flex: 1, alignItems: 'center' }}>
<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
containerStyle={{ marginBottom: 30 }}
secureTextEntry={true}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(v) => {
this.setState({ mpin: v, valid: v.length == 4 ? true : false })
}}/>
<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>
<CustomOTPInput
secureTextEntry={true}
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(v) => {
this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
}}/>
{(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()}>
<Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text>
</TouchableOpacity>

4
app/screens/myprofile/card.js
View File

@ -80,8 +80,8 @@ class MyCard extends React.Component {
render() {
return (
<View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
<View style={{flex: 1, width: '100%', height: 250, padding: 15, borderRadius: 15}}>
<ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: '100%', resizeMode: 'stretch', overflow: 'hidden', borderRadius: 15}} >
<View style={{flex: 1, padding: 15, 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%'}}>
<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>

4
app/screens/myprofile/index.js
View File

@ -64,11 +64,13 @@ class MyProfile extends React.PureComponent {
}
render() {
const { tab } = this.props.route.params;
return (
<CustomSafeArea>
<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 }}>
<Tabs renderScene={this.sceneMap()} routes={this.routes()}/>
<Tabs tab={tab} renderScene={this.sceneMap()} routes={this.routes()}/>
</Container>
</CustomSafeArea>
)

8
app/screens/myprofile/profile/edit.js
View File

@ -1,5 +1,5 @@
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 { connect } from "react-redux";
import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
@ -466,6 +466,11 @@ class EditProfile extends React.PureComponent {
navigation={this.props.navigation}
/>
<KeyboardAvoidingView
style={{flex: 1}}
behavior="padding"
keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
>
<ScrollView style={{flex: 1}}>
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
<View style={{flex: 1}}>
@ -636,6 +641,7 @@ class EditProfile extends React.PureComponent {
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
</CustomSafeArea>
<Elements.customAlert
open={this.state.openModal}

2
app/screens/payatpump/fragments/searchbar.js
View File

@ -11,7 +11,7 @@ export default function SearchBar(props){
<Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
</View>
<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>
{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} />

4
app/screens/tracker/add.js
View File

@ -53,8 +53,7 @@ const Tracker = (navigation) => {
return (
<CustomSafeArea>
<CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
<Container>
<View style={{marginTop: 20, padding: 0}}>
<View style={{marginTop: 20, padding: 0, alignItems: 'center'}}>
<CustomForm
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}}>
<Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
</TouchableOpacity>
</Container>
<Elements.CustomDatePicker
visible={datepicker}

4
ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj
View File

@ -1065,7 +1065,7 @@
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 4;
CURRENT_PROJECT_VERSION = 5;
DEVELOPMENT_TEAM = J29MB7XX75;
ENABLE_BITCODE = NO;
FRAMEWORK_SEARCH_PATHS = (
@ -1240,7 +1240,7 @@
CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 4;
CURRENT_PROJECT_VERSION = 5;
DEVELOPMENT_TEAM = J29MB7XX75;
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",

BIN
ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate generated
View File

Binary file not shown.