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

Checkpoint commit. Fixed some error from trello

This commit is contained in:
Harley Catubag 2022-06-14 11:47:49 +08:00
parent 73ec2e176b
commit 1c20e44bb2
17 changed files with 308 additions and 2375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/components/elements.js
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import {useEffect, useState, useRef} from 'react'; import {useEffect, useState, useRef} from 'react';
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, TouchableWithoutFeedback, ActivityIndicator, Alert } from 'react-native' 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 { Card, ListItem, Button, Icon, Divider, Input, Overlay, CheckBox } 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';
@ -161,22 +161,18 @@ const loyaltycard = function(props){
} }
const card = function(props){ const card = function(props){
let h = props.height ? props.height : 200 let h = props.height ? props.height : 130
return ( return (
<TouchableOpacity onPress={props.onPress} activeOpacity={ props.disabled || 0} style={{flex: 1, height: h, margin: 5, borderRadius: 15, elevation: 0, borderTopLeftRadius: 15, <TouchableOpacity onPress={props.onPress} activeOpacity={ props.disabled || 0} style={{flex: 1, height: h, margin: 5, borderRadius: 15, elevation: 0, borderTopLeftRadius: 15, borderTopRightRadius: 15, overflow: 'hidden'}}>
borderTopRightRadius: 15}}> <View style={{flex: 1}}>
<View style={{flex: 1, height: h - 30}}>
<Image <Image
source={props.image} source={props.image}
style={ style={
{ {
flex:1, width: '100%',
alignSelf: 'stretch',
resizeMode: 'cover',
width: undefined,
height: undefined,
borderTopLeftRadius: 15, borderTopLeftRadius: 15,
borderTopRightRadius: 15 borderTopRightRadius: 15,
height: '100%',
}} }}
/> />
</View> </View>
@ -302,30 +298,31 @@ const custominput = function(props){
let activeborderwidth = props.activeborderwidth || 1.5 let activeborderwidth = props.activeborderwidth || 1.5
const input = () => { const input = () => {
return ( return (
<View style={{flex: 1, marginBottom: 15, ...customstyle}}> <View style={{flex: 1, marginBottom: 15, ...customstyle}}>
<Text style={{padding: 5, paddingLeft: 15, fontSize: 12, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle}}>{props.title}</Text> <Text style={{padding: 5, paddingLeft: 15, fontSize: 12, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle}}>{props.title}</Text>
<Input <Input
focused={props.focused|| false} focused={props.focused|| false}
disabled={props.disabled || false} disabled={props.disabled || false}
keyboardType={props.keyboardType || 'default'} keyboardType={props.keyboardType || 'default'}
maxLength={props.maxLength || undefined} maxLength={props.maxLength || undefined}
value={props.value || null} value={props.value || null}
placeholder={props.placeholder} placeholder={props.placeholder}
placeholderTextColor={props.placeholderColor} placeholderTextColor={props.placeholderColor}
onChangeText={props.onChangeText} onChangeText={props.onChangeText}
onFocus={props.onFocus} onFocus={props.onFocus}
containerStyle={{padding: 0}} containerStyle={{padding: 0}}
inputContainerStyle={{padding: 0, borderBottomWidth: props.focused ? 1.5 : 0.75, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }} inputContainerStyle={{padding: 0, borderBottomWidth: props.focused ? 1.5 : 0.75, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}
inputStyle={{padding: 5, fontFamily: 'Arial', fontSize: 16, borderWidth: 0, color: props?.isDarkMode ? props.textColor : Theme.colors.black}} inputStyle={{padding: 5, fontFamily: 'Arial', fontSize: 16, borderWidth: 0, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}
/> />
{props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null} {props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
{props.bottomOption ? {props.bottomOption ?
<View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text> <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
<TouchableOpacity onPress={props.onContact || null}> <TouchableOpacity onPress={props.onContact || null}>
<Text style={{paddingLeft: 15, fontSize: 14, color: Theme.colors.accent}}>Unioil Customer Service</Text> <Text style={{paddingLeft: 15, fontSize: 14, color: Theme.colors.accent}}>Unioil Customer Service</Text>
</TouchableOpacity></View> : null } </TouchableOpacity></View> : null }
{props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null} {props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
</View>) </View>
)
} }
const select = () => { const select = () => {
return ( return (
@ -710,6 +707,49 @@ const nointernet2 = function(){
); );
} }
const customAlert = function(props) {
const {
open,
yesCB,
noCB,
title,
body,
yesText,
noText
} = props;
if(!open) return null;
return (
<TouchableOpacity activeOpacity={1} onPress={noCB} style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,.5)',
paddingHorizontal: 25
}}>
<TouchableOpacity activeOpacity={1} onPress={null} style= {{
backgroundColor: 'white',
zIndex: 10,
borderRadius: 10,
alignItems: 'center'
}}>
<Text style={{textAlign: 'center', fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
<Text style={{textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>
<View style={{flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18}}>
<TouchableOpacity onPress={noCB} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity>
<TouchableOpacity onPress={yesCB} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity>
</View>
</TouchableOpacity>
</TouchableOpacity>
)
}
const bottomselectmodal = function(props){ const bottomselectmodal = function(props){
let color = Theme.colors.textPrimary let color = Theme.colors.textPrimary
let items = props.items || [] let items = props.items || []
@ -952,5 +992,6 @@ export default {
CustomMonthPicker, CustomMonthPicker,
ActionOption, ActionOption,
ModalDialogContainer, ModalDialogContainer,
loaderView loaderView,
customAlert
} }

10
app/components/paymaya/form.js
View File

@ -63,12 +63,10 @@ class RegisterCardFrom extends React.Component {
expiry: "MM/YY", expiry: "MM/YY",
cvc: "CVC" cvc: "CVC"
}} onChange={this._onChange}/> }} onChange={this._onChange}/>
<Item stackedLabel style={{marginRight: 15}}> <Stack>
<Stack> <FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>Full Name</FormControl.Label>
<FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>Full Name</FormControl.Label> <Input style={{ color: this.props.app_theme?.theme.colors.text }} placeholder={this.state.name} value={this.state.name} onChangeText={(value) => this.setState({ name: value })} />
<Input style={{ color: this.props.app_theme?.theme.colors.text }} placeholder={this.state.name} value={this.state.name} onChangeText={(value) => this.setState({ name: value })} /> </Stack>
</Stack>
</Item>
</FormControl> </FormControl>
<View style={{width: '90%', height: 50, borderRadius: 5, borderColor: 'black', borderWidth: 0.1, backgroundColor: ((!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear) && this.props.app_theme?.theme.dark) ? Theme.colors.darkerGray : !this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear ? Theme.colors.darkerWhite : Theme.colors.primary}}> <View style={{width: '90%', height: 50, borderRadius: 5, borderColor: 'black', borderWidth: 0.1, backgroundColor: ((!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear) && this.props.app_theme?.theme.dark) ? Theme.colors.darkerGray : !this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear ? Theme.colors.darkerWhite : Theme.colors.primary}}>
<TouchableOpacity disabled={!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear} onPress={() => this.send()} style={{padding: 15}}> <TouchableOpacity disabled={!this.state.cardnumber || !this.state.cvv || !this.state.expmonth || !this.state.expyear} onPress={() => this.send()} style={{padding: 15}}>

29
app/components/safeArea.component.js
View File

@ -1,10 +1,20 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { StyleSheet, SafeAreaView,Platform} from 'react-native'; import {
Platform,
SafeAreaView,
StyleSheet,
View,
NativeModules
} from 'react-native';
import { Dimensions } from 'react-native' import { Dimensions } from 'react-native'
import Theme from '../components/theme.style.js';
const { height } = Dimensions.get('window'); const { height } = Dimensions.get('window');
const CustomSafeArea = ({children}) => { const { StatusBarManager } = NativeModules;
const statusBarHeight = StatusBarManager.HEIGHT;
const OS = Platform.OS;
const CustomSafeArea = ({customStatusBar, children}) => {
const [isIphone11,setIsIphone11] = useState(false); const [isIphone11,setIsIphone11] = useState(false);
useEffect(() =>{ useEffect(() =>{
@ -17,6 +27,14 @@ const CustomSafeArea = ({children}) => {
} }
},[]) },[])
if(customStatusBar && OS === "ios") {
return (
<View style={[styles.customSafeArea, {marginTop:isIphone11?-5:0}]}>
<View style={styles.statusBarHeight} />
{children}
</View>
)
}
return ( return (
<SafeAreaView style={[styles.customSafeArea,{marginTop:isIphone11?-5:0}]}> <SafeAreaView style={[styles.customSafeArea,{marginTop:isIphone11?-5:0}]}>
@ -26,10 +44,13 @@ const CustomSafeArea = ({children}) => {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
customSafeArea:{ customSafeArea:{
flex: 1 flex: 1
},
statusBarHeight: {
height: statusBarHeight,
backgroundColor: Theme.colors.primary,
width: '100%'
} }
}); });
export default CustomSafeArea; export default CustomSafeArea;

52
app/screens/apply/index.js
View File

@ -157,36 +157,34 @@ class ActivateAccountCard 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} backscreen={this.props.route.params ? this.props.route.params.screen : "Account"} back={true} /> <CustomHeader title="" navigation={this.props.navigation} main={false} backscreen={this.props.route.params ? this.props.route.params.screen : "Account"} back={true} />
<Container style={{flex: 1}}> <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'}} /> </View>
<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}}>Enroll 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}}>
Have a new card?
</Text>
<Text style={{alignSelf: 'center', marginTop: 1, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
Please enter your card number.
</Text>
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
<CustomInput
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(val) => {
this.setState({ cardnumber: val, valid: val.length == 16 ? true : false })
}}
/>
</View> </View>
<View style={{flex: 1, alignItems: 'center'}}> <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
<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}}>Enroll Card</Text> <TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, 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={{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={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
Have a new card? </TouchableOpacity>
</Text>
<Text style={{alignSelf: 'center', marginTop: 1, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
Please enter your card number.
</Text>
<View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}>
<CustomInput
textColor={this.props.app_theme?.theme.colors.text}
isDarkMode={this.props.app_theme?.theme.dark}
onChangeText={(val) => {
this.setState({ cardnumber: val, valid: val.length == 16 ? true : false })
}}
/>
</View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
<TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, 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'}}>Next</Text>
</TouchableOpacity>
</View>
</View> </View>
</View> </View>
</Container> </View>
</CustomSafeArea> </CustomSafeArea>
); );
} }

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

@ -131,53 +131,55 @@ class ApplyCardDetails extends React.Component {
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}> <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
<View style={{padding: 10, width: '100%'}}> <View style={{padding: 10, width: '100%'}}>
<Image source={{uri: this.card.image}} style={{resizeMode: 'stretch', width: '100%', height: Theme.screen.h / 3.6, borderRadius: 10}} /> <Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .32, borderRadius: 10}} />
</View> </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'}}> <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} {this.card.name}
</Text> </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%', height: '18%'}}> <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} {this.card.description}
</Text> </Text>
<View style={{width: '100%', opacity: this.handleShowForm()}}> <View style={{flex: 1, width: '100%'}}>
<View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}> <View style={{width: '100%', opacity: this.handleShowForm()}}>
<Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 0}}>Enter ID Number</Text> <View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
<View style={{flexDirection: 'row'}}> <Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
<Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}> {/* <View style={{flexDirection: 'row'}}>
{this.card.id_number_description ? this.card.id_number_description : ""} <Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
</Text> {this.card.id_number_description ? this.card.id_number_description : ""}
<TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}> </Text>
<Icon.Foundation name="info" color={Theme.colors.gray} size={20} /> <TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
</TouchableOpacity> <Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
</TouchableOpacity>
</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>
<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> </View>
</CustomSafeArea> </CustomSafeArea>

143
app/screens/login/index.js
View File

@ -21,6 +21,7 @@ import REQUEST from '../../components/api/';
import DB from '../../components/storage/'; import DB from '../../components/storage/';
import CustomInput from '../../components/custominput'; import CustomInput from '../../components/custominput';
import CustomSafeArea from '../../components/safeArea.component'; import CustomSafeArea from '../../components/safeArea.component';
import { StatusBar } from 'native-base';
class AddAccountCard extends React.PureComponent { class AddAccountCard extends React.PureComponent {
@ -135,87 +136,85 @@ class AddAccountCard extends React.PureComponent {
render() { render() {
let version = `v${DeviceInfo.getReadableVersion()}` let version = `v${DeviceInfo.getReadableVersion()}`
return ( return (
<ImageBackground <CustomSafeArea customStatusBar={true}>
source={Assets.bg.login_bg} <ImageBackground
style={{ flex: 1 }}> source={Assets.bg.login_bg}
<CustomSafeArea> style={{ flex: 1 }}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Elements.loaderView <Elements.loaderView
title="Validating" title="Validating"
message="Please wait, validating your card number..." message="Please wait, validating your card number..."
isDarkMode={this.props.app_theme?.theme.dark} isDarkMode={this.props.app_theme?.theme.dark}
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} />
<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: '83%', resizeMode: 'contain'}} /> <Image source={Assets.logo.unioil} style={{width: '100%', height: '83%', resizeMode: 'contain'}} />
</View> </View>
<View style={{flex: 1, alignItems: 'center'}}> <View style={{flex: 1, alignItems: 'center'}}>
<Text style={{alignSelf: 'center', fontFamily: 'Arial', fontSize: 25, paddingLeft: 15, paddingRight: 15, paddingBottom: 15, color: Theme.colors.white, fontStyle: 'italic' }}>Make Life Rewarding</Text> <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontSize: 25, paddingLeft: 15, paddingRight: 15, paddingBottom: 15, color: Theme.colors.white, fontStyle: 'italic' }}>Make Life Rewarding</Text>
<Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.white, fontFamily: 'Arial', fontSize: 16}}> <Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.white, fontFamily: 'Arial', fontSize: 16}}>
Enter your mobile number. Enter your mobile number.
</Text> </Text>
<View> <View>
<CustomInput <CustomInput
isMobileNumber={true} isMobileNumber={true}
textColor={Theme.colors.white} textColor={Theme.colors.white}
onChangeText={(val) => { onChangeText={(val) => {
let value = val.includes(".") ? val.replace(".", "") : val let value = val.includes(".") ? val.replace(".", "") : val
this.setState({ mobilenumber: value, valid: value.length == 13 ? true : false, agree: false }) this.setState({ mobilenumber: value, valid: value.length == 13 ? true : false, agree: false })
}} }}
/> />
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}> <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => this.state.valid ? this.onAgree() : null} style={{flex: 0, padding: 8}}> <TouchableOpacity onPress={() => this.state.valid ? this.onAgree() : null} style={{flex: 0, padding: 8}}>
{!this.state.agree || !this.state.valid ? <Icon.Feather name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />} {!this.state.agree || !this.state.valid ? <Icon.Feather name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.primary} size={20} />}
</TouchableOpacity>
<View style={{flexDirection: 'row', padding: 8}}>
<Text style={{ color: Theme.colors.white }}>I agree to Unioil's </Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions")}>
<Text style={{color: Theme.colors.white, textDecorationLine: 'underline'}}>Data Privacy Policy.</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={{flexDirection: 'row', padding: 8}}>
<Text style={{ color: Theme.colors.white }}>I agree to Unioil's </Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions")}>
<Text style={{color: Theme.colors.white, textDecorationLine: 'underline'}}>Data Privacy Policy.</Text>
</TouchableOpacity>
</View>
</View> </View>
</View> </View>
</View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}> <TouchableOpacity onPress={() => this.onSubmit()} disabled={(!this.state.agree || !this.state.valid)} style={{padding: 20, paddingTop: 15, width: Theme.screen.w * .73, paddingBottom: 15, borderRadius: 10, backgroundColor: (this.state.agree && this.state.valid) ? Theme.colors.primary : Theme.colors.darkGray + "40"}}>
<TouchableOpacity onPress={() => this.onSubmit()} disabled={(!this.state.agree || !this.state.valid)} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: (this.state.agree && this.state.valid) ? Theme.colors.primary : Theme.colors.darkGray + "40"}}> <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Log In</Text>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Log In</Text> </TouchableOpacity>
</TouchableOpacity> </View>
</View>
<View style={{alignItems: 'center'}}> <View style={{alignItems: 'center'}}>
<Text style={{fontSize: 16, fontFamily: 'Arial', color: Theme.colors.textPrimary, color: '#fff'}}>or</Text> <Text style={{fontSize: 16, fontFamily: 'Arial', color: Theme.colors.textPrimary, color: '#fff'}}>or</Text>
</View> </View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, marginTop: 5}}> <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, marginTop: 5}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate("EnrollActivate", {screen: "Login"}) } style={{padding: 15, paddingTop: 12, width: Theme.screen.w - 80, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}> <TouchableOpacity onPress={() => this.props.navigation.navigate("EnrollActivate", {screen: "Login"}) } style={{padding: 15, paddingTop: 12, width: Theme.screen.w * .65, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Activate your Card</Text> <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Activate your Card</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, paddingTop: 0}}> <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, paddingTop: 0}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate("ApplySelectCard") } style={{padding: 15, paddingTop: 12, width: Theme.screen.w - 80, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}> <TouchableOpacity onPress={() => this.props.navigation.navigate("ApplySelectCard") } style={{padding: 15, paddingTop: 12, width: Theme.screen.w * .65, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Apply for a Card</Text> <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Apply for a Card</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, paddingTop: 25}}> <TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions") } style={{paddingHorizontal: 15, width: Theme.screen.w - 80, paddingBottom: 12}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions") } style={{padding: 15, paddingTop: 12, width: Theme.screen.w - 80, paddingBottom: 12}}>
<Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Enter as Guest</Text> <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Enter as Guest</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</View> <View style={{flexDirection: 'row'}}>
<View style={{flexDirection: 'row'}}> <TouchableOpacity onPress={() => {ContactOptions()}} style={{padding: 15, alignItems: 'flex-start', flex: 1}}>
<TouchableOpacity onPress={() => {ContactOptions()}} style={{padding: 15, alignItems: 'flex-start', flex: 1}}> <Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'left', color: Theme.colors.white}}>Contact Us</Text>
<Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'left', color: Theme.colors.white}}>Contact Us</Text> </TouchableOpacity>
</TouchableOpacity> <TouchableOpacity onPress={() => {}} style={{padding: 15, justifyContent: 'flex-end', flex: 1}}>
<TouchableOpacity onPress={() => {}} style={{padding: 15, justifyContent: 'flex-end', flex: 1}}> <Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'right', color: Theme.colors.white}}>{version}</Text>
<Text style={{fontSize: 18, fontFamily: 'Arial', textAlign: 'right', color: Theme.colors.white}}>{version}</Text> </TouchableOpacity>
</TouchableOpacity> </View>
</View> </ImageBackground>
</CustomSafeArea> </CustomSafeArea>
</ImageBackground>
) )
} }
} }

2
app/screens/login/t&c.js
View File

@ -116,7 +116,7 @@ class TermsConditions extends React.PureComponent {
</View> </View>
{this.state.connection && !this.sender ? <View style={{padding: 15, paddingTop: 5}}> {this.state.connection && !this.sender ? <View style={{padding: 15, paddingTop: 5}}>
<TouchableOpacity onPress={() => this.setGuest() }> <TouchableOpacity onPress={() => this.setGuest() }>
<Text style={{textAlign: 'right', color: Theme.colors.primary, fontSize: 16}}>I Agree</Text> <Text style={{textAlign: 'right', color: Theme.colors.primary, fontSize: 16}}>I Accept</Text>
</TouchableOpacity> </TouchableOpacity>
</View> : null } </View> : null }
</CustomSafeArea> </CustomSafeArea>

871
app/screens/main/home.js
View File

@ -473,873 +473,4 @@ const mapDispatchToProps = {
saveUserInfo saveUserInfo
} }
export default connect(mapStateToProps, mapDispatchToProps)(Home) export default connect(mapStateToProps, mapDispatchToProps)(Home)
// const Home = (props) => {
// const navigate = (screen, params) => { props.navigation.navigate(screen, params) }
// const whats_hot = (props.whats_hot != undefined && props.whats_hot.length > 0) ? props.whats_hot : []
// const whats_promos = (props.promos != undefined && props.promos.length > 0) ? props.promos : []
// const [loading, setloading] = useState(true)
// const [refresh, setRefresh] = useState(false)
// const [connected, setconnection] = useState(false)
// const [infodialog, setinfodialog] = useState(true)
// const [promos, setpromos] = useState(whats_promos)
// const [promogps, setpromogps] = useState([])
// const [showpromogps, setshowpromogps] = useState(false)
// const [promogpsindex, setpromogpsindex] = useState(null)
// const [_carousel, setcarousel] = useState("")
// const [whatsHot, setwhatsHot] = useState(whats_hot)
// const [activeSlide, setactiveSlide] = useState(0)
// const [session, setsession] = useState(null)
// const [userProfile, setUserProfile] = useState({})
// const [notifications, setnotifications] = useState([])
// const [isGuest, setisGuest] = useState(false)
// var backPressCount = 0
// var backPressDuration = 0
// const loadUserProfile = async () => {
// const SESSION = await DB.session()
// props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
// setUserProfile(res)
// })
// }
// const load = async () => {
// const SESSION = await DB.session()
// const USERPROFILE = await DB.profile()
// const isGuest = await DB.get('is_guest')
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// try{
// await setsession(SESSION)
// await setUserProfile(USERPROFILE)
// props.saveWhatshot({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
// setwhatsHot(res)
// })
// props.savePromos({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
// setpromos(res)
// })
// Geolocation.getCurrentPosition(
// info => {
// REQUEST("promo_gps", "post", {
// Authorization: SESSION.token
// }, {}, {
// lcard_uuid: SESSION.user.lcard_uuid,
// longitude: info.coords.longitude,
// latitude: info.coords.latitude
// }, function(res){
// setpromogps(res.data)
// setshowpromogps(true)
// }, function(error){
// console.log(error)
// })
// },
// error => console.log(error)
// )
// await setloading(false)
// } catch(error) {
// setloading(false)
// }
// loadNotifications()
// }
// const loadIsGuest = async () => {
// setisGuest(true)
// setloading(false)
// await REQUEST("promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// let wh = []
// for(var x=0;x<res.data.length;x++){
// if(res.data[x].image.includes("mobiletestbuckethttps")){
// wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))
// }else{
// wh.push(res.data[x].image)
// }
// }
// setwhatsHot(wh)
// console.log("WHATS HOT", wh)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("new_promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// setpromos(res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await setUserProfile({})
// }
// const init = () => {
// NetInfo.netstatus(isConnected => {
// if(isConnected) {
// if(refresh) {
// load()
// setRefresh(false)
// } else {
// if(props.userinfo == undefined && props.userinfo == null) {
// loadUserProfile()
// } else {
// setUserProfile(props.userinfo)
// }
// if(props.whats_hot == undefined && props.promos == undefined) {
// load()
// } else {
// setloading(false)
// }
// }
// } else {
// setloading(false)
// Elements.nointernet2()
// }
// })
// }
// const onBackPress = () => {
// let listener = setInterval(() => {
// backPressDuration += 1
// if(backPressDuration >= 15){
// backPressCount = 0
// backPressDuration = 0
// clearInterval(listener)
// }
// }, 100)
// backPressCount += 1
// console.log("Back Press Count", backPressCount, typeof backPressCount)
// if(backPressCount == 2){
// backPressCount = 0
// backPressDuration = 0
// BackHandler.exitApp()
// return false
// }else{
// ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
// return true
// }
// }
// useEffect(() => {
// BackHandler.addEventListener('hardwareBackPress', onBackPress)
// return () => {
// BackHandler.removeEventListener('hardwareBackPress', onBackPress)
// }
// }, [])
// const softLoad = async () => {
// NetInfo.fetch().then(async state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// setloading(true)
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// const SESSION = await DB.session()
// await REQUEST("user_profile", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(data){
// console.log("FETCH USER PROFILE");
// if(data.status == 1){
// DB.updateProfile(data, function(){
// console.log("USER PROFILE SAVED! ")
// setUserProfile(data)
// }, function(error){
// console.log("Error saving profile", error)
// })
// }
// setloading(false)
// }, function(error){
// setloading(false)
// console.log(error)
// })
// }else{
// setloading(false)
// Elements.nointernet2()
// }
// })
// }
// useEffect(() => {
// init()
// console.log("LOAD DATA");
// }, [])
// const loadNotifications = async () => {
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// }
// useEffect(() => {
// const unsubscribe = messaging().onMessage(async remoteMessage => {
// setTimeout(async () => {
// if(Platform.OS == 'ios'){
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications, allnotifs)
// }else{
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications)
// }
// }, 300);
// })
// return unsubscribe;
// }, []);
// const validate = async (tkn) => {
// const SESSION = await DB.session()
// if(!SESSION.token){
// alert("You are not logged in!");
// setloading(false)
// props.navigation.navigate("Login")
// }
// }
// const renderwhatsHot = ({item, index}) => {
// return (
// <View key={index} style={{flex: 1}}>
// <Image source={item.image} style={{width: '100%', height: Theme.screen.h / 2.8 - 60, borderRadius: 20, resizeMode: 'stretch'}} />
// </View>)
// }
// const renderPromos = () => {
// return promos.map((promo, index) => {
// return (
// <Elements.card
// key={index}
// disabled={0}
// title={promo.title || 'DIXIE'}
// onPress={() => {
// console.log("CLICKED!!!")
// navigate('PromoDetails', {data: promo, type: "promo", onBackPress: softLoad});
// }}
// image={{uri: promo.image}} />)
// })
// }
// const renderPromoGPS = () => {
// if(!promogps || promogps.length == 0) return null
// return promogps.map((promo, i) => {
// return <Elements.promoGPS
// key={i}
// visible={showpromogps}
// title={promo.title}
// image={{uri: promo.image}}
// onDismiss={() => {
// setpromogpsindex(i)
// setshowpromogps(false)
// }}
// onOpen={() => {
// setshowpromogps(false)
// navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: softLoad});
// }}
// />
// })
// }
// const renderNotifications = () => {
// return notifications.map((notif, index) => {
// return <Elements.notification
// key={index}
// visible={notif.visible}
// title={notif.title}
// message={notif.body}
// onClose={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
// console.log("Close notification triggered")
// }}
// onDismiss={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// console.log("Dismissed")
// }}
// />
// })
// }
// return (
// <View style={{flex: 1, height: '100%'}}>
// <SafeAreaView style={{flex: 1}}>
// {renderNotifications()}
// <Elements.loader visible={loading} />
// {isGuest ? <GuestHeader
// navigation={props.navigation}
// reload={loadIsGuest}
// /> : null}
// {loading && !isGuest ? <EmptyHeader
// navigation={props.navigation}
// reload={softLoad}
// /> : !isGuest ?
// <CustomHeader
// title=""
// banner={true}
// menu={true}
// navigation={props.navigation}
// reload={softLoad}
// /> : null }
// <ScrollView
// showsHorizontalScrollIndicator={false}
// showsVerticalScrollIndicator={false}
// contentContainerStyle={{
// flexGrow: 1,
// padding: 15
// }}
// refreshControl={
// <RefreshControl refreshing={loading} onRefresh={() => {
// setRefresh(true)
// init()
// }} />
// }>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>
// <View style={{width: '100%', height: Theme.screen.h / 3.29, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
// <SliderBox
// images={whatsHot}
// autoplay={true}
// circleLoop={true}
// resizeMode={"stretch"}
// dotColor={Theme.colors.primary}
// inactiveDotColor={Theme.colors.gray}
// parentWidth={Theme.screen.w - 40}
// ImageComponentStyle={{borderRadius: 10}}
// />
// </View>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>
// <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>
// {renderPromos()}
// </View>
// {renderPromoGPS()}
// </ScrollView>
// </SafeAreaView>
// </View>
// );
// }
// const mapStateToProps = (state) => {
// console.log(state);
// return {
// userinfo: state.appUserInfoReducer.userinfo,
// whats_hot: state.appWhatshotAndPromosReducer.whats_hot,
// promos: state.appWhatshotAndPromosReducer.promos
// }
// }
// const mapDispatchToProps = {
// saveWhatshot,
// savePromos,
// saveUserInfo
// }
// export default connect(mapStateToProps, mapDispatchToProps)(Home)
// export default function Home(navigation) {
// const navigate = (screen, params) => { navigation.navigation.navigate(screen, params) }
// const [loading, setloading] = useState(true);
// const [connected, setconnection] = useState(false);
// const [infodialog, setinfodialog] = useState(true);
// const [promos, setpromos] = useState([]);
// const [promogps, setpromogps] = useState([]);
// const [showpromogps, setshowpromogps] = useState(false)
// const [promogpsindex, setpromogpsindex] = useState(null)
// const [_carousel, setcarousel] = useState("");
// const [whatsHot, setwhatsHot] = useState([]);
// const [activeSlide, setactiveSlide] = useState(0);
// const [session, setsession] = useState(null);
// const [userProfile, setUserProfile] = useState({});
// const [notifications, setnotifications] = useState([]);
// const [isGuest, setisGuest] = useState(false)
// var backPressCount = 0
// var backPressDuration = 0
// var sampledata = {}
// // var sampledata = {"data": {"address": "", "birthdate": "January 01, 1990", "card_bg_image": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/cardTypes_bg_image/1582093000.jpg", "card_black_label": 0, "card_code": "PUVCARD", "card_image": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/cardTypes/1582093256.jpg", "card_number": "1119000000000020", "card_type": "PASADANG UNIOIL VALUE CARD", "city_name": "", "civilstatus_code": "SE", "email": "bry.rnr@gmail.com", "expiry_date": "2023-02-07", "firstname": "RNR", "fueltype_code": "0", "gender_code": "F", "lastname": "PUV", "lcard_uuid": "5fd8f34c-49ca-11ea-9ba4-02189255205c", "middlename": "", "mobile": "639957951241", "photo": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/memberPhoto/1581094497.jpg", "pin": "03444748", "points": 1600, "vo_code": "0"}, "message": "Success", "retrieved": {"address": "", "card_number": "1119000000000020", "card_type_code": "PUVCARD", "card_type_desc": "PASADANG UNIOIL VALUE CARD", "civil_status_code": "SE", "civil_status_desc": "SEPARATED", "email": "bry.rnr@gmail.com", "first_name": "RNR", "fuel_type_code": "0", "fuel_type_desc": "NO DATA ENTERED", "gender_code": "F", "gender_desc": "FEMALE", "is_bdo": "0", "is_caltex": "0", "is_cebupacific": "0", "is_flyingv": "0", "is_happy": "0", "is_jetti": "0", "is_mabuhay": "0", "is_mercury": "0", "is_national": "0", "is_petron": "0", "is_petronv": "0", "is_phoenix": "0", "is_ptt": "0", "is_robinson": "0", "is_s&r": "0", "is_seaoil": "0", "is_shell": "0", "is_sm": "0", "is_starbucks": "0", "is_total": "0", "last_name": "PUV", "middle_initial": "", "mobile": "639957951241", "number_cars": "0", "occupation": "0", "vehicle_own_code": "0", "vehicle_own_desc": "NO DATA ENTERED"}, "status": 1}
// // async function requestUserPermission() {
// // const authStatus = await messaging().requestPermission();
// // if (authStatus) {
// // console.log('Permission status:', authStatus);
// // }
// // // const enabled =
// // // authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;
// // // if (enabled) {
// // // console.log('Firebase Notification Authorization status:', authStatus);
// // // }
// // }
// const load = async () => {
// const SESSION = await DB.session()
// const USERPROFILE = await DB.profile()
// const isGuest = await DB.get('is_guest')
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// try{
// setloading(true)
// await setsession(SESSION)
// await setUserProfile(USERPROFILE)
// // await validate()
// await REQUEST("user_profile", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(data){
// console.log("FETCH USER PROFILE");
// if(data.status == 1){
// DB.updateProfile(data, function(){
// console.log("USER PROFILE SAVED! ", data)
// setUserProfile(data)
// }, function(error){
// console.log("Error saving profile", error)
// })
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("whats_hot", "get", {
// Authorization: SESSION.token,
// }, `lcard_uuid=${SESSION.user.lcard_uuid}`, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// let wh = []
// for(var x=0;x<res.data.length;x++){
// if(res.data[x].image.includes("mobiletestbuckethttps")){
// wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))
// }else{
// wh.push(res.data[x].image)
// }
// }
// setwhatsHot(wh)
// console.log("WHATS HOT", whatsHot)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("new_promos", "get", {}, `lcard_uuid=${SESSION.user.lcard_uuid}`, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// setpromos(res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// Geolocation.getCurrentPosition(
// info => {
// REQUEST("promo_gps", "post", {
// Authorization: SESSION.token
// }, {}, {
// lcard_uuid: SESSION.user.lcard_uuid,
// longitude: info.coords.longitude,
// latitude: info.coords.latitude
// }, function(res){
// setpromogps(res.data)
// setshowpromogps(true)
// }, function(error){
// console.log(error)
// })
// },
// error => {
// console.log(error)
// }
// )
// await setloading(false)
// }catch(error){
// console.log(error)
// setloading(false)
// }
// loadNotifications()
// }
// const loadIsGuest = async () => {
// setisGuest(true)
// setloading(false)
// await REQUEST("promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// let wh = []
// for(var x=0;x<res.data.length;x++){
// if(res.data[x].image.includes("mobiletestbuckethttps")){
// wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))
// }else{
// wh.push(res.data[x].image)
// }
// }
// setwhatsHot(wh)
// console.log("WHATS HOT", wh)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await REQUEST("new_promos", "get", {}, {}, {},
// function(res){
// if(res.status == 1 && res.data.length > 0){
// setpromos(res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// })
// await setUserProfile({})
// }
// const init = () => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// load()
// }else{
// setloading(false)
// Elements.nointernet2()
// }
// });
// }
// const onBackPress = () => {
// let listener = setInterval(() => {
// backPressDuration += 1
// if(backPressDuration >= 15){
// backPressCount = 0
// backPressDuration = 0
// clearInterval(listener)
// }
// }, 100)
// backPressCount += 1
// console.log("Back Press Count", backPressCount, typeof backPressCount)
// if(backPressCount == 2){
// backPressCount = 0
// backPressDuration = 0
// BackHandler.exitApp()
// return false
// }else{
// ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
// return true
// }
// }
// useEffect(() => {
// BackHandler.addEventListener('hardwareBackPress', onBackPress)
// return () => {
// BackHandler.removeEventListener('hardwareBackPress', onBackPress)
// }
// }, [])
// const softLoad = async () => {
// NetInfo.fetch().then(async state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// setloading(true)
// if(isGuest == 'true'){
// loadIsGuest()
// return
// }
// const SESSION = await DB.session()
// await REQUEST("user_profile", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(data){
// console.log("FETCH USER PROFILE");
// if(data.status == 1){
// DB.updateProfile(data, function(){
// console.log("USER PROFILE SAVED! ")
// setUserProfile(data)
// }, function(error){
// console.log("Error saving profile", error)
// })
// }
// setloading(false)
// }, function(error){
// setloading(false)
// console.log(error)
// })
// }else{
// setloading(false)
// Elements.nointernet2()
// }
// })
// }
// useEffect(() => {
// init()
// console.log("LOAD DATA");
// }, [])
// const loadNotifications = async () => {
// //RESET NOTIFICATIONS
// // await DB.remove("notifications")
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// // console.log("Notifications", notifs)
// }
// useEffect(() => {
// const unsubscribe = messaging().onMessage(async remoteMessage => {
// setTimeout(async () => {
// if(Platform.OS == 'ios'){
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications, allnotifs)
// }else{
// let allnotifs = await DB.get("notifications")
// let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
// await setnotifications(notifs)
// console.log("A new notification has recieved on home page", notifications)
// }
// }, 300);
// })
// return unsubscribe;
// }, []);
// const validate = async (tkn) => {
// const SESSION = await DB.session()
// if(!SESSION.token){
// alert("You are not logged in!");
// setloading(false)
// navigation.navigation.navigate("Login")
// }
// }
// const renderwhatsHot = ({item, index}) => {
// return (
// <View key={index} style={{flex: 1}}>
// <Image source={item.image} style={{width: '100%', height: Theme.screen.h / 2.8 - 60, borderRadius: 20, resizeMode: 'stretch'}} />
// </View>)
// }
// const renderPromos = () => {
// return promos.map((promo, index) => {
// return (
// <Elements.card
// key={index}
// disabled={0}
// title={promo.title || 'DIXIE'}
// onPress={() => {
// console.log("CLICKED!!!")
// navigate('PromoDetails', {data: promo, type: "promo", onBackPress: softLoad});
// }}
// image={{uri: promo.image}} />)
// })
// }
// const renderPromoGPS = () => {
// if(!promogps || promogps.length == 0) return null
// return promogps.map((promo, i) => {
// return <Elements.promoGPS
// key={i}
// visible={showpromogps}
// title={promo.title}
// image={{uri: promo.image}}
// onDismiss={() => {
// setpromogpsindex(i)
// setshowpromogps(false)
// }}
// onOpen={() => {
// setshowpromogps(false)
// navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: softLoad});
// }}
// />
// })
// }
// const renderNotifications = () => {
// return notifications.map((notif, index) => {
// return <Elements.notification
// key={index}
// visible={notif.visible}
// title={notif.title}
// message={notif.body}
// onClose={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
// console.log("Close notification triggered")
// // console.log("tried to close notification", notifications)
// }}
// onDismiss={async () => {
// let nfcopy = notifications
// nfcopy[index].visible = false
// await setnotifications([])
// await setnotifications(nfcopy)
// console.log("Dismissed")
// }}
// />
// })
// }
// return (
// <View style={{flex: 1, height: '100%'}}>
// <SafeAreaView style={{flex: 1}}>
// {renderNotifications()}
// <Elements.loader visible={loading} />
// {isGuest ? <GuestHeader
// navigation={navigation}
// reload={loadIsGuest}
// /> : null}
// {loading && !isGuest ? <EmptyHeader
// navigation={navigation}
// reload={softLoad}
// /> : !isGuest ?
// <CustomHeader
// title=""
// banner={true}
// menu={true}
// navigation={navigation}
// reload={softLoad}
// /> : null }
// <ScrollView
// showsHorizontalScrollIndicator={false}
// showsVerticalScrollIndicator={false}
// contentContainerStyle={{
// flexGrow: 1,
// padding: 15
// }}
// refreshControl={
// <RefreshControl refreshing={loading} onRefresh={init} />
// }>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>
// <View style={{width: '100%', height: Theme.screen.h / 2.57, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
// <SliderBox
// images={whatsHot}
// autoplay={true}
// circleLoop={true}
// resizeMode={"stretch"}
// dotColor={Theme.colors.primary}
// inactiveDotColor={Theme.colors.gray}
// parentWidth={Theme.screen.w - 40}
// ImageComponentStyle={{borderRadius: 10}}
// />
// </View>
// <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>
// <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>
// {renderPromos()}
// </View>
// {renderPromoGPS()}
// </ScrollView>
// </SafeAreaView>
// </View>
// );
// }
// // useEffect(() => {
// // setnotifications([{
// // title: "Unioil",
// // body: "Welcome to Unioil Loyalty App",
// // visible: true
// // },{
// // title: "Membership",
// // body: "Redeem points and use your points to buy our products",
// // visible: true
// // }])
// // }, [])
// /*
// // await setpromos([
// // {
// // title: 'Dixie Ganda',
// // image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
// // description: 'asd asd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
// // description: 'asd asdasdasd'
// // }
// // ])
// // await setwhatsHot([
// // {
// // title: 'Dixie Ganda',
// // image: Assets.test.zuvapit[Math.floor(Math.random() * Assets.test.zuvapit.length - 1)],
// // description: 'asd asd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.mina[Math.floor(Math.random() * Assets.test.mina.length - 1)],
// // description: 'asd asdasdasd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.zuvapit[Math.floor(Math.random() * Assets.test.zuvapit.length - 1)],
// // description: 'asd asdasdasd'
// // },
// // {
// // title: 'Ganda Dixie',
// // image: Assets.test.mina[Math.floor(Math.random() * Assets.test.mina.length - 1)],
// // description: 'asd asdasdasd'
// // }
// // ])
// {/* <Elements.card
// disabled={1}
// title={promos[0]?.title || 'DIXIE'}
// onPress={() => {
// navigate('PromoDetails', promos[0]);
// }}
// image={promos[0]?.image || Assets.dixie} />
// <Elements.card
// disabled={1}
// title={promos[1]?.title || 'DIXIE'}
// onPress={() => {
// navigate('PromoDetails', promos[1]);
// }}
// image={promos[1]?.image || Assets.dixie} /> }
// */

149
app/screens/main/rewards.js
View File

@ -70,7 +70,7 @@ class Rewards extends React.Component {
} }
} }
render = () => { toRender = () => {
if(!this.state.connection){ if(!this.state.connection){
return ( return (
<Elements.nointernet <Elements.nointernet
@ -96,11 +96,15 @@ class Rewards extends React.Component {
render() { render() {
return ( return (
<CustomSafeArea> <CustomSafeArea>
<CustomHeader title="Rewards" menu={true} navigation={this.props.navigation} /> <CustomHeader
title="Rewards"
menu={true}
navigation={this.props.navigation}
/>
{ {
!this.state.guest ? !this.state.guest ?
<View style={{flex: 1}}> <View style={{flex: 1}}>
{this.render()} {this.toRender()}
</View> </View>
: :
<View style={styles.viewStyle}> <View style={styles.viewStyle}>
@ -157,141 +161,4 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
textAlign: 'center', textAlign: 'center',
} }
}) })
// export default function Rewards(navigation) {
// const [data, setdata] = useState("")
// const [connection, setconnection] = useState(false)
// const netInfo = useNetInfo();
// const [guest, setGuest] = useState(false)
// const init = async () => {
// let isGuest = await DB.get("is_guest");
// setGuest(isGuest)
// setconnection(true)
// const SESSION = await DB.session()
// try{
// await REQUEST("shared_treats", "get", {
// Authorization: SESSION.token
// }, {}, {},
// async (res) => {
// if(res.status == 1 && res.data){
// await setdata(await res.data)
// }else{
// console.log(res.message, res.data)
// }
// }, function(error){
// console.log(error)
// }
// )
// }catch(error){
// console.log(error)
// }
// }
// const styles = StyleSheet.create({
// enrollBtn: {
// backgroundColor: '#e74610',
// height: Theme.screen.h / 19,
// marginHorizontal: 15,
// borderRadius: 10,
// alignItems: 'center',
// justifyContent: 'center',
// marginVertical: 15,
// paddingHorizontal: 15,
// elevation: 2
// },
// enrollBtnTxt: {
// textAlign: 'center',
// alignItems: 'center',
// color: '#fff',
// fontWeight: '600',
// fontSize: 14
// },
// viewStyle: {
// height: Theme.screen.h,
// flex: 1,
// flexDirection: 'row',
// justifyContent: 'center'
// },
// viewStyle1: {
// justifyContent: 'center',
// alignItems: 'center',
// textAlign: 'center',
// }
// })
// useEffect(() => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// // Alert.alert("System Advisory", "We're working on more exciting rewards for you! Redemption of points will be temporarily unavailable. A notification will be sent once this feature has been restored. \nWe apologize for the inconvenience.");
// init()
// }else{
// Elements.nointernet2()
// }
// });
// }, [])
// console.log(data.site)
// const render = () => {
// if(!connection){
// return (
// <Elements.nointernet
// message="No internet found. Please check your internet connection."
// buttonText="Try Again"
// onPress={() => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// init()
// }else{
// Elements.nointernet2()
// }
// })
// }}
// />
// )
// }
// return (
// <WebView
// originWhitelist={['*']}
// source={{uri: data.site}}
// startInLoadingState={true}
// scalesPageToFit={true}
// style={{
// width: Theme.screen.w,
// height: Theme.screen.h
// }}
// />)
// }
// return (
// <SafeAreaView style={{flex: 1}}>
// <CustomHeader title="Rewards" menu={true} navigation={navigation} />
// {
// !guest ?
// <View style={{flex: 1}}>
// {render()}
// </View>
// :
// <View style={styles.viewStyle}>
// <View style={[styles.viewStyle1, { paddingHorizontal: 20 }]}>
// <Text style={[styles.viewStyle1, { fontSize: 15 }]}>
// You won't be able to access some of the pages unless you will enroll your card or login.
// </Text>
// <TouchableOpacity style={styles.enrollBtn} onPress={()=>{ navigation.navigation.navigate('Login') }}>
// <Text style={styles.enrollBtnTxt}>Enroll Card</Text>
// </TouchableOpacity>
// </View>
// </View>
// }
// </SafeAreaView>
// );
// }

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

@ -3,7 +3,6 @@ import { SafeAreaView, ScrollView, TouchableOpacity, View, Text, Alert } from 'r
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";
import { StackActions } from '@react-navigation/native';
import CustomHeader from '../../../components/header.js'; import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js'; import Assets from '../../../components/assets.manager.js';
import Theme from '../../../components/theme.style.js'; import Theme from '../../../components/theme.style.js';
@ -25,6 +24,7 @@ class EditProfile extends React.PureComponent {
} }
state = { state = {
openModal: false,
loading: false, loading: false,
userProfile: null, userProfile: null,
focused: false, focused: false,
@ -150,7 +150,13 @@ class EditProfile extends React.PureComponent {
} }
if(!this.state.fuelType && this.state.userProfile.fueltype_code == "0"){ if(!this.state.fuelType && this.state.userProfile.fueltype_code == "0"){
res = Object.assign(this.state.errors, {fuelType : ["This field is required"]}) res = Object.assign(this.state.errors, {fuelType : ["This field is required"]})
} }
if(this.state.maritalStatus === null) {
res = Object.assign(this.state.errors, {maritalStatus : ["This field is required"]})
}
if(this.state.gender === null) {
res = Object.assign(this.state.errors, {gender : ["This field is required"]})
}
this.setState({ errors: res, loading: false }) this.setState({ errors: res, loading: false })
return Object.keys(this.state.errors).length > 0 ? false : true return Object.keys(this.state.errors).length > 0 ? false : true
} }
@ -301,10 +307,7 @@ class EditProfile extends React.PureComponent {
} else { } else {
this.responseHandler(success, handler => { this.responseHandler(success, handler => {
this.props.route.params.onGoBack(success.data); this.props.route.params.onGoBack(success.data);
this.props.navigation.dispatch({ this.props.navigation.pop(2);
routName: "MenuTab",
type: "GoToRoute"
});
}) })
} }
}, error => { }, error => {
@ -329,28 +332,18 @@ class EditProfile extends React.PureComponent {
}) })
} }
onSubmit = () => { onSubmit = async () => {
this.setState({ focused: false }) this.setState({ focused: false, openModal: false })
if(this.hasChanges()){ if(this.hasChanges()){
Alert.alert( let validation = await this.FormValidate();
"Update Profile",
'\nAre you sure you want to save changes to your profile?\n', if(!validation) return
[{
text: 'Cancel', if(this.state.newmobile != "" && this.state.newmobile.replace("+", "") != this.state.userProfile.mobile){
style: 'cancel', this.SaveWithOtp()
},{ }else{
text: 'OK', onPress: async () => { this.SaveNoOtp()
let validation = await this.FormValidate() }
if(!validation) return
if(this.state.newmobile != "" && this.state.newmobile.replace("+", "") != this.state.userProfile.mobile){
this.SaveWithOtp()
}else{
this.SaveNoOtp()
}
}
}],
{cancelable: true}
);
}else{ }else{
this.props.navigation.goBack() this.props.navigation.goBack()
} }
@ -384,6 +377,7 @@ class EditProfile extends React.PureComponent {
render() { render() {
return ( return (
<>
<CustomSafeArea> <CustomSafeArea>
<Elements.loaderView <Elements.loaderView
title="Updating Profile" title="Updating Profile"
@ -614,8 +608,10 @@ class EditProfile extends React.PureComponent {
onPress={() => { onPress={() => {
this.onInputFocus(9) this.onInputFocus(9)
this.onSelectPress(3) this.onSelectPress(3)
delete this.state.errors["maritalStatus"]
}} }}
error={"This field is required"} /> hasError={this.state.errors && this.state.errors.maritalStatus ? true : false}
errorMessage={"This field is required"} />
<Elements.custominput <Elements.custominput
type="select" type="select"
@ -627,18 +623,28 @@ class EditProfile extends React.PureComponent {
onPress={() => { onPress={() => {
this.onInputFocus(10) this.onInputFocus(10)
this.onSelectPress(4) this.onSelectPress(4)
delete this.state.errors["gender"]
}} }}
error={"This field is required"} /> hasError={this.state.errors && this.state.errors.gender ? true : false}
errorMessage={"This field is required"} />
</View> </View>
</View> </View>
<View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}> <View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}>
<TouchableOpacity onPress={() => this.onSubmit()} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}> <TouchableOpacity onPress={() => this.setState({ openModal: true })} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}>
<Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text> <Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView> </ScrollView>
</CustomSafeArea> </CustomSafeArea>
<Elements.customAlert
open={this.state.openModal}
title={"Update Profile"}
body={"Are you sure you want to save" + '\n' +"Changes to your profile?"}
noCB={() => this.setState({ openModal: false })}
yesCB={this.onSubmit}
/>
</>
) )
} }
} }
@ -654,501 +660,4 @@ const mapDispatchToProps = {
saveUserInfo saveUserInfo
} }
export default connect(mapStateToProps, mapDispatchToProps)(EditProfile) export default connect(mapStateToProps, mapDispatchToProps)(EditProfile);
// export default function EditProfile(navigation) {
// const [loading, setloading] = useState(false)
// const [userProfile, setUserProfile] = useState(null)
// const [focused, setfocused] = useState(false);
// const [editprofileselect, seteditprofileselect] = useState(false)
// const [customerserviceselect, setcustomerserviceselect] = useState(false)
// const [currentFocus, setCurrentFocus] = useState(null);
// const [opendialog, setopendialog] = useState(false);
// const [currentDialog, setCurrentDialog] = useState(null);
// const [currentphoto, setcurrentphoto] = useState(null)
// const [newphoto, setnewphoto]= useState(null)
// const [newmobile, setnewmobile]= useState("")
// const [newemail, setnewemail]= useState(null)
// const [newaddress, setnewaddress]= useState(null)
// const [newcity, setnewcity]= useState(null)
// const [vehicleType, setVehicleTyle] = useState(null);
// const [fuelType, setFuelType] = useState(null);
// const [maritalStatus, setMaritalStatus] = useState(null);
// const [gender, setGender] = useState(null);
// const [is_deleted, setdeleted] = useState(false);
// const [errors, seterrors] = useState({});
// useEffect(() => {
// // navigation.route.params.data.photo = ''
// setloading(true)
// setUserProfile(navigation.route?.params.data)
// setloading(false)
// console.log("PROFILE", navigation.route?.params.data)
// }, [])
// const onInputFocus = (index) => {
// setfocused(true)
// setCurrentFocus(index)
// }
// const onSelectPress = (index) => {
// setopendialog(true)
// setCurrentDialog(index)
// }
// const getFT = (type) => {
// let types = Assets.fueltypes
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
// return ""
// }
// const getVT = (type) => {
// let types = Assets.vehicletypes
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
// return ""
// }
// const getMS = (type) => {
// let types = Assets.civilstatus
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
// return ""
// }
// const getG = (type) => {
// let types = Assets.gender
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
// return ""
// }
// const getCN = () => {
// }
// const onDeletePhoto = () => {
// setdeleted(true)
// setcurrentphoto(Assets.logo.profileHolder)
// }
// const onEditPhoto = () => {
// ImagePicker.launchImageLibrary({}, (response) => {
// // let b64 = response.data
// // response.data = ''
// if(!response.didCancel){
// if(is_deleted){
// setdeleted(false)
// setcurrentphoto(null)
// }
// setnewphoto(response)
// }
// // console.log(response)
// });
// }
// const FormValidate = async () => {
// let res = {}
// setloading(true)
// if(newemail == ""){
// res = Object.assign(errors, {email: ["This field is required"]})
// }
// if(newaddress == "" || newaddress == null && userProfile.address == ""){
// // seterrors(Object.assign(errors, {address: ["This field is required"]}))
// res = Object.assign(errors, {address: ["This field is required"]})
// }
// if(!vehicleType && userProfile.vo_code == "0"){
// // seterrors(Object.assign(errors, {vehicleType: ["This field is required"]}))
// res = Object.assign(errors, {vehicleType: ["This field is required"]})
// }
// if(!fuelType && userProfile.fueltype_code == "0"){
// // seterrors(Object.assign(errors, {fuelType : ["This field is required"]}))
// res = Object.assign(errors, {fuelType : ["This field is required"]})
// }
// seterrors(res)
// setloading(false)
// return Object.keys(errors).length > 0 ? false : true
// }
// const Body = function(){
// return {
// image: newphoto ? newphoto.uri : null,
// mobile: newmobile,
// email: newemail,
// address: newaddress,
// city: newcity,
// vo_code: vehicleType ? vehicleType.value : null,
// fueltype_code: fuelType ? fuelType.value : null,
// civilstatus_code: maritalStatus ? maritalStatus.value : null,
// gender_code: gender ? gender.value : null,
// is_deleted: is_deleted
// }
// }
// const SaveNoOtp = async () => {
// let SESSION = await DB.session()
// if(newphoto){
// // console.log("BLOB BODY", blobBody.image.uri)
// setloading(true)
// RNFETCHBLOB("update_profile_no_otp", "POST",
// {Authorization: SESSION.token}, {}, Utils.blobBody({newphoto, userProfile, newmobile, newemail, newaddress, newcity, vehicleType, fuelType, maritalStatus, gender, is_deleted}),
// function(res){
// console.log(res)
// setloading(false)
// Utils.responseHandler(res, () => {
// navigation.route.params.onGoBack()
// navigation.navigation.goBack()
// }, (errors) => {
// seterrors(errors)
// })
// }, function(err){
// setloading(false)
// setTimeout(() => {
// if(newphoto) Alert.alert("Error", "Failed to upload image")
// }, 300)
// })
// }else{
// setloading(true)
// await REQUEST("update_profile_no_otp", "post", {
// Authorization: SESSION.token,
// "Content-Type": "multipart/form-data",
// }, {}, Utils.formData({userProfile, newmobile, newemail, newaddress, newcity, vehicleType, fuelType, maritalStatus, gender, is_deleted}),
// function(res){
// setloading(false)
// console.log("Update Res", res)
// Utils.responseHandler(res, () => {
// navigation.route.params.onGoBack()
// navigation.navigation.goBack()
// }, (errors) => {
// seterrors(errors)
// })
// }, function(error){
// console.log("Failed", error)
// setloading(false)
// setTimeout(() => {
// if(newphoto) Alert.alert("Error", "Failed to upload image")
// }, 300)
// })
// }
// }
// const SaveWithOtp = () => {
// navigation.navigation.navigate("AccountSendOtp", {
// data: {
// lcard_uuid: userProfile.lcard_uuid,
// mobile_number: newmobile.replace("+", "")
// },
// type: 'edit',
// callback: (res) => {
// if(res == "valid") SaveNoOtp()
// },
// })
// }
// const onSubmit = () => {
// setfocused(false)
// if(hasChanges()){
// Alert.alert(
// "Update Profile",
// '\nAre you sure you want to save changes to your profile?\n',
// [{
// text: 'Cancel',
// style: 'cancel',
// },{
// text: 'OK', onPress: async () => {
// let validation = await FormValidate()
// if(!validation) return
// if(newmobile != "" && newmobile.replace("+", "") != userProfile.mobile){
// SaveWithOtp()
// }else{
// SaveNoOtp()
// }
// }
// }],
// {cancelable: true}
// );
// }else{
// navigation.navigation.goBack()
// }
// }
// const hasChanges = () => {
// let values = Object.values(Body())
// for(var x=0;x<values.length;x++){
// if(values[x] || values[x] == "") return true
// }
// return false
// }
// const handleUpdatePhotoOptions = () => {
// Elements.ActionOption({
// options: ['Edit Photo', 'Delete Photo', 'Cancel'],
// functions: [{
// execute: () => onEditPhoto()
// }, {
// execute: () => onDeletePhoto()
// }]
// })
// }
// const renderProfilePhoto = () => {
// if(currentphoto) return Assets.logo.profileHolder
// else if(!currentphoto && newphoto || newphoto) return {uri: newphoto.uri}
// else if(!currentphoto && !newphoto && userProfile && userProfile.photo) return {uri: userProfile.photo}
// else return Assets.logo.profileHolder
// }
// return (
// <SafeAreaView style={{flex: 1}}>
// <Elements.loader visible={loading} />
// <Elements.checkboxdialog
// title="Vehicle Type"
// selected={vehicleType ? vehicleType.value : userProfile ? userProfile.vo_code : 0}
// shown={opendialog && currentDialog == 1 ? true : false}
// onCancel={() => setopendialog(!opendialog)}
// onSelect={(value, string) => {
// setVehicleTyle({
// value: value,
// string: string
// })
// setopendialog(!opendialog)
// }}
// items={Assets.vehicletypes}
// />
// <Elements.checkboxdialog
// title="Fuel Type"
// selected={fuelType ? fuelType.value : userProfile ? userProfile.fueltype_code : 0}
// shown={opendialog && currentDialog == 2 ? true : false}
// onCancel={() => setopendialog(!opendialog)}
// onSelect={(value, string) => {
// setFuelType({
// value: value,
// string: string
// })
// setopendialog(!opendialog)
// }}
// items={Assets.fueltypes}
// />
// <Elements.checkboxdialog
// title="Marital Status"
// selected={maritalStatus ? maritalStatus.value : userProfile ? userProfile.civilstatus_code : 0}
// shown={opendialog && currentDialog == 3 ? true : false}
// onCancel={() => setopendialog(!opendialog)}
// onSelect={(value, string) => {
// setMaritalStatus({
// value: value,
// string: string
// })
// setopendialog(!opendialog)
// }}
// items={Assets.civilstatus}
// />
// <Elements.checkboxdialog
// title="Gender"
// selected={gender ? gender.value : userProfile ? userProfile.gender_code : 0}
// shown={opendialog && currentDialog == 4 ? true : false}
// onCancel={() => setopendialog(!opendialog)}
// onSelect={(value, string) => {
// setGender({
// value: value,
// string: string
// })
// setopendialog(!opendialog)
// }}
// items={Assets.gender}
// />
// <CustomHeader
// title="Edit Profile"
// menu={false}
// backscreen="MyProfile"
// back={true}
// onBackPress={() => {
// if(hasChanges()){
// Alert.alert(
// null,
// 'You have an unsaved profile information, are you sure you want to navigate back?\n',
// [{
// text: 'Cancel',
// style: 'cancel',
// },
// {
// text: 'OK', onPress: () => navigation.navigation.navigate("MyProfile")
// },
// ],
// {cancelable: true}
// );
// }else{
// navigation.navigation.navigate("MyProfile")
// }
// }}
// navigation={navigation}
// />
// <ScrollView style={{flex: 1}}>
// <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
// <View style={{flex: 1}}>
// {/* <Avatar rounded source={currentphoto ? Assets.logo.profileHolder : {uri: newphoto ? newphoto.uri : userProfile ? userProfile.photo === '' ? Assets.logo.profileHolder : userProfile.photo : Assets.logo.profileHolder}} size="large" /> */}
// <Avatar rounded size="large" source={renderProfilePhoto()} />
// </View>
// <View style={{flex: 2.5, justifyContent: 'center'}}>
// {userProfile && userProfile.photo && !is_deleted || userProfile && !userProfile.photo && newphoto && !is_deleted ?
// <TouchableOpacity onPress={handleUpdatePhotoOptions}>
// <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Edit Photo</Text>
// </TouchableOpacity> :
// <TouchableOpacity onPress={() => onEditPhoto()}>
// <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Add Photo</Text>
// </TouchableOpacity>
// }
// </View>
// </View>
// <View style={{flex: 1, width: '100%', padding: 5}}>
// <View>
// <Elements.custominput
// type="input"
// title="First Name"
// placeholder={userProfile ? userProfile.firstname : ''}
// disabled
// onChange={null}
// bottomOption={true}
// onContact={ContactOptions}
// error={"This field is required"} />
// <Elements.custominput
// type="input"
// title="Last Name"
// placeholder={userProfile ? userProfile.lastname : ''}
// disabled
// onChange={null}
// bottomOption={true}
// onContact={ContactOptions}
// error={"This field is required"} />
// <Elements.custominput
// type="input"
// title="Birthday"
// placeholder={userProfile ? new moment(new Date(userProfile.birthdate)).format("DD MMM YYYY") : ''}
// disabled
// onChange={null}
// bottomOption={true}
// onContact={ContactOptions}
// error={"This field is required"} />
// <Elements.custominput
// type="input"
// title="Mobile Number"
// keyboardType="numeric"
// maxLength={13}
// value={newmobile ? newmobile.length <= 2 ? '+63' : newmobile : userProfile ? "+" + userProfile.mobile : ''}
// placeholder=""
// onChangeText={(value) => {
// setnewmobile(value)
// console.log(value)
// }}
// focused={focused && currentFocus == 3 ? true : false}
// onFocus={() => onInputFocus(3)}
// error={"This field is required"} />
// <Elements.custominput
// type="input"
// title="Email Address"
// value={newemail ? newemail : userProfile && newemail != '' ? userProfile.email : ''}
// bottomText="your@email.com"
// focused={focused && currentFocus == 4 || errors && errors.email ? true : false}
// onFocus={() => onInputFocus(4)}
// onChangeText={(value) => {
// setnewemail(value)
// delete errors["email"]
// }}
// hasError={errors && errors.email ? true : false}
// errorMessage={errors && errors.email ? errors.email[0] : "Invalid email"}
// />
// <Elements.custominput
// type="input"
// title="Address"
// value={newaddress ? newaddress : userProfile && newaddress != '' ? userProfile.address : ''}
// focused={focused && currentFocus == 5 || errors && errors.address ? true : false}
// onFocus={() => onInputFocus(5)}
// onChangeText={(value) => {
// setnewaddress(value)
// delete errors["address"]
// }}
// hasError={errors && errors.address ? true : false}
// errorMessage={errors && errors.address ? errors.address[0] : "Invalid address"}
// />
// {/* <Elements.custominput
// type="input"
// title="City"
// value={newcity ? newcity : userProfile && newcity != '' ? userProfile.city_name : ''}
// focused={focused && currentFocus == 6 ? true : false}
// onFocus={() => onInputFocus(6)}
// onChangeText={(value) => setnewcity(value)}
// error={"This field is required"} /> */}
// <Elements.custominput
// type="select"
// title="Vehicle Type"
// value={vehicleType ? vehicleType.string : userProfile ? getVT(userProfile.vo_code) : 'Select'}
// focused={focused && currentFocus == 7 ? true : false}
// onPress={() => {
// onInputFocus(7)
// onSelectPress(1)
// delete errors["vehicleType"]
// }}
// hasError={errors && errors.vehicleType ? true : false}
// errorMessage={errors && errors.vehicleType ? errors.vehicleType[0] : "Invalid vehicle type"}
// />
// <Elements.custominput
// type="select"
// title="Fuel Type"
// value={fuelType ? fuelType.string : userProfile ? getFT(userProfile.fueltype_code) : 'Select'}
// focused={focused && currentFocus == 8 ? true : false}
// onPress={() => {
// onInputFocus(8)
// onSelectPress(2)
// delete errors["fuelType"]
// }}
// hasError={errors && errors.fuelType ? true : false}
// errorMessage={errors && errors.fuelType ? errors.fuelType[0] : "Invalid fuel type"}
// />
// <Elements.custominput
// type="select"
// title="Marital Status"
// value={maritalStatus ? maritalStatus.string : userProfile ? getMS(userProfile.civilstatus_code) : 'Select'}
// focused={focused && currentFocus == 9 ? true : false}
// onPress={() => {
// onInputFocus(9)
// onSelectPress(3)
// }}
// error={"This field is required"} />
// <Elements.custominput
// type="select"
// title="Gender"
// value={gender ? gender.string : userProfile ? getG(userProfile.gender_code) : 'Select'}
// focused={focused && currentFocus == 10 ? true : false}
// onPress={() => {
// onInputFocus(10)
// onSelectPress(4)
// }}
// error={"This field is required"} />
// </View>
// </View>
// <View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}>
// <TouchableOpacity onPress={onSubmit} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}>
// <Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text>
// </TouchableOpacity>
// </View>
// </ScrollView>
// </SafeAreaView>
// );
// }

2
app/screens/route.js
View File

@ -14,7 +14,7 @@ import Theme from '../components/theme.style.js';
import Notch from '../components/notch.js'; import Notch from '../components/notch.js';
import REQUEST from '../components/api'; import REQUEST from '../components/api';
import MainMenu from './main/'; import MainMenu from './main/drawer.js';
import Login from './login/'; import Login from './login/';
import Splash from './splash/'; import Splash from './splash/';

154
app/screens/topup/form.js
View File

@ -128,7 +128,7 @@ class TokenizationForm extends React.Component {
let addedCard = await Tokenization.initNewAddCard(this.props.customerId, merchant) let addedCard = await Tokenization.initNewAddCard(this.props.customerId, merchant)
if(addedCard.status == 'failed') { if(addedCard.status == 'failed') {
this.setState({ loading: false, isVisibleModal: false }) this.setState({ loading: false, isVisibleModal: false })
let message = addedCard?.result?.merchant?.parameters != undefined ? addedCard?.result?.merchant?.parameters[0].description : checkout?.card != undefined ? checkout?.card.parameters[0].description : "Invalid card" let message = addedCard?.result?.merchant?.parameters != undefined ? addedCard?.result?.merchant?.parameters[0].description : addedCard?.card != undefined ? addedCard?.card.parameters[0].description : "Invalid card"
Platform.OS == 'ios' ? setTimeout(() => { Platform.OS == 'ios' ? setTimeout(() => {
Alert.alert("Top Up", message) Alert.alert("Top Up", message)
}, 800) : Alert.alert("Top Up", message) }, 800) : Alert.alert("Top Up", message)
@ -276,154 +276,4 @@ const mapStateToProps = (state) => {
} }
} }
export default connect(mapStateToProps, null)(TokenizationForm) export default connect(mapStateToProps, null)(TokenizationForm);
// export default function TokenizerForm(props){
// let {
// isVisible,
// onGoBack,
// amount,
// onSuccess,
// } = props;
// const [loading, setloading] = useState(false)
// const onCreateVault = async (card) => {
// setloading(true)
// let merchant = await UTILS.createMerchantDetails()
// merchant.card = {card: {name: card.name, number: card.credit_card, expMonth: card.expmonth, expYear: card.expyear, cvc: card.cvv}}
// console.log(merchant)
// let checkout = await Tokenization.initCheckOut("", "", merchant, amount)
// if(checkout.status == 'failed'){
// if(checkout.result.merchant.parameters){
// Platform.OS == 'ios' ? setTimeout(() => {
// Alert.alert("Top Up", "\nUpdate your profile first before using this feature.")
// }, 300) : Alert.alert("Top Up", "\nUpdate your profile first before using this feature.")
// }
// // alert(JSON.stringify(checkout.result, null, '\t'))
// console.log("RESULT CARD", checkout.result.card)
// console.log("RESULT MERCHANT", checkout.result.merchant)
// setloading(false)
// }else if(checkout.status == 'success'){
// console.log("RESULT", checkout)
// setloading(false)
// onGoBack();
// onSuccess({
// amount: amount,
// data: {redirectUrl: checkout.verificationUrl, card_number: checkout.card_number, type: 'create'},
// // onBack: (res, msg) => props.route.params.onReload(res, msg)
// onBack: (res, msg) => alert(msg)
// });
// }
// setloading(false)
// props.onGoBack()
// // let client = {}
// // client.card = {
// // card: {
// // number: card.card_number,
// // expMonth: card.expmonth,
// // expYear: card.expyear,
// // cvc: card.cvv
// // }
// // }
// }
// const onAddVault = async (card) => {
// setloading(true)
// let ccard = {card: {name: card.name, number: card.credit_card, expMonth: card.expmonth, expYear: card.expyear, cvc: card.cvv}}
// let checkout = await Tokenization.initAdd(ccard, props.customerId)
// if(checkout.status == 'failed'){
// setTimeout(() => {
// alert(JSON.stringify(checkout, null, '\t'))
// }, 700)
// console.log("RESULT CARD", checkout)
// setloading(false)
// }else if(checkout.status == 'success'){
// console.log("RESULT", checkout.link.maskedPan)
// console.log("CUST ID", props.customerId)
// if(checkout.link.code){
// console.log(props.customerId)
// }else{
// onSuccess({
// amount: amount,
// data: {redirectUrl: checkout.link.verificationUrl, card_number: checkout.link.maskedPan, type: 'add'},
// // onBack: (res, msg) => props.route.params.onReload(res, msg)
// onBack: (res, msg) => {
// Platform.OS == 'ios' ? setTimeout(() => {
// Alert.alert(
// 'Add Card',
// `\nYour new credit card has successfully added to your account.`,
// [
// {
// text: "OK",
// onPress: async () => {
// await props.onDone()
// }
// },
// ]
// )
// }, 700) :
// null
// }
// });
// }
// }
// setloading(false)
// props.onGoBack()
// }
// const handleJustu = async (card) => {
// if(props.type == "create"){
// Platform.OS == 'ios' ? setTimeout(() => {
// Alert.alert(
// 'Confirm Top Up',
// `\nYour credit card will be used to pay ${parseFloat(props.amount).toFixed(2)} points.`,
// [
// {
// text: "NO",
// style: "cancel"
// },
// {
// text: "YES",
// onPress: () => {
// onCreateVault(card)
// }
// },
// ]
// )
// }, 700) :
// null
// }else if(props.type == 'add'){
// onAddVault(card)
// }
// }
// return (
// <Modal
// animationType="fade"
// visible={isVisible}
// onRequestClose={onGoBack}
// transparent={true}
// presentationStyle="overFullScreen"
// style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.9)'}}>
// <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center'}}>
// <Elements.loader visible={loading} />
// <View style={{width: '90%'}}>
// <Button activeOpacity={1} iconRight style={{backgroundColor: 'white', flexDirection: 'row-reverse', padding: 10}} onPress={onGoBack}>
// {/* <Icon name='close' style={{color: 'black'}} /> */}
// <Image source={Assets.icons.stpcloseform} style={{width: 25, height: 25}} />
// </Button>
// <Form onSend={handleJustu} />
// </View>
// </View>
// </Modal>
// )
// }

501
app/screens/topup/index.js
View File

@ -342,7 +342,6 @@ class TopUp extends React.Component {
} }
render() { render() {
if(!this.state.connected){ if(!this.state.connected){
return ( return (
<SafeAreaView style={{flex: 1}}> <SafeAreaView style={{flex: 1}}>
@ -418,7 +417,7 @@ class TopUp extends React.Component {
</View> </View>
</View> </View>
{this.state.creditcards.length > 0 ? {/* {this.state.creditcards.length > 0 ?
<List key={0}> <List key={0}>
<ListItem thumbnail> <ListItem thumbnail>
<Left> <Left>
@ -442,7 +441,7 @@ class TopUp extends React.Component {
</Body> </Body>
</ListItem> </ListItem>
</List> </List>
} } */}
{this.state.creditcards.length <= 5 && ( {this.state.creditcards.length <= 5 && (
<TouchableOpacity onPress={() => this.initAddCard()} style={{flexDirection: 'row', alignItems: 'center', padding: 15, borderBottomWidth: 0.5, borderColor: 'lightgray'}}> <TouchableOpacity onPress={() => this.initAddCard()} style={{flexDirection: 'row', alignItems: 'center', padding: 15, borderBottomWidth: 0.5, borderColor: 'lightgray'}}>
@ -453,7 +452,7 @@ class TopUp extends React.Component {
</TouchableOpacity> </TouchableOpacity>
)} )}
{this.state.creditcards.length > 0 && this.state.creditcards.map((card, index) => { {/* {this.state.creditcards.length > 0 && this.state.creditcards.map((card, index) => {
return ( return (
<List key={index}> <List key={index}>
<ListItem thumbnail> <ListItem thumbnail>
@ -487,7 +486,7 @@ class TopUp extends React.Component {
</ListItem> </ListItem>
</List> </List>
) )
})} })} */}
<View style={{marginBottom:60}}></View> <View style={{marginBottom:60}}></View>
</View> </View>
{this.state.topupCount >= 5 ? null : {this.state.topupCount >= 5 ? null :
@ -515,494 +514,4 @@ const mapDispatchToProps = {
saveUserInfo saveUserInfo
} }
export default connect(mapStateToProps, mapDispatchToProps)(TopUp) export default connect(mapStateToProps, mapDispatchToProps)(TopUp);
// export default function TopUp(navigation) {
// const [connected, setconnected] = useState(false);
// const [isCardFormVisible, setCardFormVisibility] = useState(false);
// const [loading, setloading] = useState(false);
// const [popup, setpopup] = useState(false);
// const [Task, setTask] = useState("");
// const [DisplayAmount, setDisplayAmount] = useState("");
// const [amount, setAmount] = useState(0);
// const [focused, setfocused] = useState(false);
// const [checkoutResult, setCheckOutResult] = useState("");
// const [userProfile, setUserProfile] = useState(null);
// const [topupCount, setTopupCount] = useState(0);
// const [merchant, setmerchant] = useState({});
// const [creditcards, setcreditcards] = useState([]);
// const [activeIndex, setActiveIndex] = useState(0);
// const init = async () => {
// setconnected(true)
// setloading(true)
// await countTransactions()
// let User = await DB.profile()
// let ses = await DB.session()
// console.log("tkn", ses.token)
// await getMerchant()
// await setUserProfile(User)
// setloading(false)
// }
// const countTransactions = async () => {
// const SESSION = await DB.session()
// const USERPROFILE = await DB.profile()
// await REQUEST("transactions", "get", {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {}, function(res){
// let count = 0
// if(res.data.length > 0){
// for(var x=0;x<res.data.length;x++){
// let today = moment()
// let dt = moment(res.data[x].date.split(",")[0])
// let diff = dt.diff(today, 'days')
// if(diff == 0) count++
// }
// }
// setTopupCount(count)
// if(count > 5){
// setloading(false)
// Platform.OS == 'ios' ? setTimeout(() => {
// Alert.alert("Top Up", "\nYou have reached your maximum top up for this day.")
// }, 700)
// :
// Alert.alert("Top Up", "\nYou have reached your maximum top up for this day.")
// }
// }, function(error){
// console.log(error)
// })
// }
// const handleDelete = (id, token, uuid) => {
// Alert.alert(
// "Delete Payment Card",
// "Are you sure you want to delete this card?",
// [
// {
// text: "NO",
// style: "cancel"
// },
// {
// text: "YES",
// onPress: () => {
// setloading(true)
// Tokenization.initRemove(id, token, uuid).then((res) => {
// setloading(false)
// if(res.result == 'OK'){
// Platform.OS == 'ios' ?
// setTimeout(() => {
// Alert.alert("Deleted Successfully", "\nYour credit card has successfully deleted.", [{text: "OK", onPress: async () => await init()}])
// }, 700)
// :
// Alert.alert("Deleted Successfully", "\nYour credit card has successfully deleted.", [{text: "OK", onPress: async () => await init()}])
// }
// })
// }
// },
// ]
// )
// }
// const getMerchant = async () => {
// const SESSION = await DB.session()
// const USERPROFILE = await DB.profile()
// await REQUEST("paymaya_tokens", "get", {'Authorization': SESSION.token}, {noID: true, value: SESSION.user.card_number}, {}, async (res) => {
// console.log("MERCHANT", res)
// if(res.data && res.data.cards){
// setmerchant(res.data)
// console.log("MERCHANT", res.data.cards)
// // let accounts = await Tokenization.getAccounts(res.data[0].customer_id)
// setActiveIndex(0)
// for(var x=0;x<res.data.cards.length;x++){
// if(res.data.cards[x].default) setActiveIndex(x)
// }
// setcreditcards(res.data.cards)
// console.log("Accounts", creditcards)
// }else{
// setmerchant({})
// setcreditcards([])
// }
// }, function(error){
// console.log(error)
// })
// }
// useEffect(() => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// init()
// }else{
// Elements.nointernet2()
// }
// })
// }, [])
// const moneyFormat = (price, sign = 'PHP ') => {
// const pieces = parseFloat(price).toFixed(2).split('')
// let ii = pieces.length - 3
// while ((ii-=3) > 0) {
// pieces.splice(ii, 0, ',')
// }
// return sign + pieces.join('')
// }
// const setamount = (value) => {
// setDisplayAmount(moneyFormat(value).toString())
// setAmount(value)
// }
// let current = ""
// const onAmountChange = (value) => {
// if(value != current){
// let parsed = parseFloat(clean(value))
// if(parsed > 1000000) return false
// let formatted = formatCurrency(parsed)
// current = formatted
// setDisplayAmount(formatted)
// setAmount(parseFloat(parsed/100))
// console.log(parsed, formatted, current)
// }
// }
// const clean = (str) => {
// return str.replace("PHP ", "").replace(".", "").replace(",", "").toString()
// }
// const formatCurrency = (val) => {
// let fv = parseFloat(val / 100).toFixed(2)
// return val.length == 6 ? "PHP " + fv.substr(0, 1) + "," + fv.substr(2, fv.length) : "PHP " + fv
// }
// const validate = () => {
// if(amount < 100 || amount > 10000){
// Alert.alert("Invalid top up amount", "\nPlease enter value between 100 - 10,000 pesos only.\n")
// return false
// }
// return true
// }
// const onReload = (res, msg) => {
// // setTask(msg)
// // setpopup(true)
// // setTimeout(function(){
// // setpopup(false)
// // }, 1200)
// // navigation.navigation.navigate("Main")
// }
// const InitCheckout = async () => {
// if(!validate()) return false
// console.log('merchant', creditcards[activeIndex])
// if(creditcards.length > 0){
// // HAS AN EXISTING MERCHANT TOKEN
// let mct = creditcards[activeIndex]
// Platform.OS == 'ios' ?
// setTimeout(() => {
// Alert.alert("Confirm Top Up", "\nYour card number will be used to pay for "+parseFloat(amount).toFixed(2)+" points.", [
// {text: "NO",style: "cancel"},
// {text: "YES",
// onPress: async () => {
// setloading(true)
// let payout = await Tokenization.initPayOut(mct.customer_id, mct.cardTokenId, amount)
// console.log(payout)
// if(payout.isPaid){
// if(payout.status == 'PAYMENT_SUCCESS'){
// const SESSION = await DB.session()
// REQUEST('topup', 'post', {
// Authorization: SESSION.token,
// card_number: SESSION.user.card_number
// }, {}, {
// amount: amount
// }, function(res){
// Platform.OS == 'ios' ? setTimeout(() => {
// Alert.alert(
// 'Transaction Completed!',
// `\nYou have successfully paid ${parseFloat(amount).toFixed(2)} points from your credit card \n**** **** **** ${mct.maskedPan}.`,
// [
// {
// text: "OK",
// onPress: () => {
// navigation.navigation.reset({
// index: 0,
// routes: [ { name: 'Main' } ],
// })
// }
// },
// ])
// }, 700) :
// null
// }, function(error){
// console.log(error)
// })
// }else{
// setTimeout(() => alert(JSON.stringify(payout)), 300)
// }
// setloading(false)
// }
// }
// }
// ])
// }, 300)
// :
// Alert.alert("Confirm Top Up", "\nYour card number will be used to pay for "+parseFloat(amount).toFixed(2)+" points.", [
// {text: "NO",style: "cancel"},
// {text: "YES",
// onPress: async () => {
// setloading(true)
// let payout = await Tokenization.initPayOut(mct.customer_id, mct.cardTokenId, amount)
// console.log(payout)
// if(payout.isPaid){
// if(payout.status == 'PAYMENT_SUCCESS'){
// Platform.OS == 'ios' ? setTimeout(() => {
// Alert.alert("Topup Success", `\nYou have successfully paid ${parseFloat(amount).toFixed(2)} points from your credit card ${payout.fundSource.details.masked}`)
// }, 300) :
// Alert.alert("Topup Success", `\nYou have successfully paid ${parseFloat(amount).toFixed(2)} points from your credit card ${payout.fundSource.details.masked}`)
// }
// }else{
// setTimeout(() => alert(JSON.stringify(payout)), 300)
// }
// setloading(false)
// }
// }
// ])
// }else{
// //PRE REGISTRATION
// // navigation.navigation.navigate('TokenizationForm', {amount: amount, onBack: (res, msg) => onReload(res, msg)})
// setCardFormVisibility(true);
// }
// return
// // navigation.navigation.navigate('CheckOut', {
// // amount: amount,
// // data: {redirectUrl: "https://payments-web-sandbox.paymaya.com/authenticate?id=" + payout.id},
// // // onBack: (res, msg) => props.route.params.onReload(res, msg)
// // onBack: (res, msg) => alert(msg)
// // })
// console.log('initializing...')
// setloading(true)
// const details = {
// "totalAmount": TotalAmount('PHP', amount),
// "buyer": Buyer(
// userProfile.data.firstname,
// userProfile.data.middlename,
// userProfile.data.lastname,
// "+" + userProfile.data.mobile,
// userProfile.data.email),
// "items": [Item('Top up', 1, 'N/A', 'Top up points', TotalAmount('PHP', amount))],
// "redirectUrl": {
// "success": "https://unioil.herokuapp.com/success",
// "failure": "https://unioil.herokuapp.com/failure",
// "cancel": "https://unioil.herokuapp.com/cancel"
// },
// "requestReferenceNumber": Ref(),
// "metadata": {}
// }
// CheckOut(PAYMENT_ENV, details, function(result){
// console.log('CHECKOUT RESULT', result)
// setloading(false)
// navigation.navigation.navigate('CheckOut', {amount: amount, data: result, onBack: (res, msg) => onReload(res, msg)})
// })
// }
// const InitAddCard = async () => {
// setCardFormVisibility(true)
// }
// if(!connected){
// return (
// <SafeAreaView style={{flex: 1}}>
// <View style={{flex: 1}}>
// <CustomHeader title="Top Up Points" menu={false} navigation={navigation} />
// <Elements.nointernet
// message="No internet found. Please check your internet connection."
// buttonText="Try Again"
// onPress={() => {
// NetInfo.fetch().then(state => {
// console.log("Connection type", state.type);
// console.log("Is connected?", state.isConnected);
// if(state.isConnected){
// init()
// }else{
// Elements.nointernet2()
// }
// })
// }}
// />
// </View>
// </SafeAreaView>
// )
// }
// const getDisplayCard = (type) => {
// if(type == "visa") return Assets.icons.stpvisa
// else if(type == "master-card") return Assets.icons.stpmastercard
// else if(type == "jcb") return Assets.icons.stpjcb
// else return Assets.stpunknown
// }
// return (
// <SafeAreaView style={{flex: 1}}>
// {isCardFormVisible && (
// <TokenizationForm
// type={creditcards.length > 0 ? 'add' : 'create'}
// customerId={merchant && creditcards.length > 0 ? merchant.customer_id : ''}
// amount={amount}
// onDone={init}
// onBack={(res, msg) => onReload(res, msg)}
// onGoBack={() => setCardFormVisibility(false)}
// onSuccess={data => navigation.navigation.navigate('CheckOut', data)}
// />
// )}
// <Elements.loader visible={loading} />
// <CustomHeader title="Top Up Points" menu={false} navigation={navigation} />
// <Content>
// <View style={{flexDirection: 'row', padding: 15, backgroundColor: Theme.colors.textPrimary}}>
// <View style={{flex: 1}}>
// <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Select Top Up Value Points</Text>
// </View>
// </View>
// <View style={{flexDirection: 'column', padding: 20, paddingTop: 10, paddingBottom: 5, alignItems: 'center'}}>
// <View style={{flexDirection: 'row'}}>
// <TouchableOpacity onPress={() => setamount(100)} style={{flex: 1, margin: 10, padding: 10, borderRadius: 10, borderColor: Theme.colors.primary, borderWidth: 2}}>
// <Text style={{textAlign: 'center', fontFamily: 'Arial', fontSize: 16, color: Theme.colors.primary}}>100</Text>
// </TouchableOpacity>
// <TouchableOpacity onPress={() => setamount(500)} style={{flex: 1, margin: 10, padding: 10, borderRadius: 10, borderColor: Theme.colors.primary, borderWidth: 2}}>
// <Text style={{textAlign: 'center', fontFamily: 'Arial', fontSize: 16, color: Theme.colors.primary}}>500</Text>
// </TouchableOpacity>
// </View>
// <View style={{flexDirection: 'row'}}>
// <TouchableOpacity onPress={() => setamount(1000)} style={{flex: 1, margin: 10, padding: 10, borderRadius: 10, borderColor: Theme.colors.primary, borderWidth: 2}}>
// <Text style={{textAlign: 'center', fontFamily: 'Arial', fontSize: 16, color: Theme.colors.primary}}>1000</Text>
// </TouchableOpacity>
// <TouchableOpacity onPress={() => setamount(5000)} style={{flex: 1, margin: 10, padding: 10, borderRadius: 10, borderColor: Theme.colors.primary, borderWidth: 2}}>
// <Text style={{textAlign: 'center', fontFamily: 'Arial', fontSize: 16, color: Theme.colors.primary}}>5000</Text>
// </TouchableOpacity>
// </View>
// </View>
// <View style={{padding: 15, paddingTop: 0}}>
// <Text style={{padding: 5, paddingLeft:12, fontSize: 14, color: Theme.colors.darkGray}}>
// Or Enter Desired Value (maximum of 10,000 points)
// </Text>
// <Input
// keyboardType="numeric"
// placeholder="PHP"
// value={DisplayAmount}
// // value={amount.length > 0 ? "PHP " + parseFloat(amount) : amount}
// onFocus={() =>
// setfocused(true)
// }
// onChangeText={(value) => onAmountChange(value)}
// containerStyle={{padding: 0}}
// inputContainerStyle={{padding: 0, borderBottomWidth: focused ? 1.75 : 1, borderColor: focused ? Theme.colors.accent : "gray" }}
// inputStyle={{padding: 0, fontFamily: 'Arial', fontSize: 16}}
// />
// <Text style={{fontStyle: 'italic', fontSize: 15, paddingLeft: 12, marginTop: 20, fontFamily: 'Arial', color: Theme.colors.darkGray}}>Note: Top Up to a maximum of five(5) times per day.</Text>
// </View>
// <View style={{flexDirection: 'row', padding: 15, backgroundColor: Theme.colors.textPrimary}}>
// <View style={{flex: 1}}>
// <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>Payment Method</Text>
// </View>
// </View>
// {creditcards.length > 0 ?
// <List key={0}>
// <ListItem thumbnail>
// <Left>
// <Thumbnail square small source={getDisplayCard(creditcards[activeIndex].cardType)} style={{resizeMode: "stretch"}} />
// </Left>
// <Body>
// <Text>{creditcards[activeIndex].cardType.toString().toUpperCase()} {creditcards[activeIndex].maskedPan}</Text>
// <Text note numberOfLines={1}>**** **** **** {creditcards[activeIndex].maskedPan}</Text>
// </Body>
// </ListItem>
// </List>
// :
// <List key={0}>
// <ListItem thumbnail>
// <Left>
// <Thumbnail square small source={Assets.icons.stpunknown} style={{resizeMode: "stretch"}} />
// </Left>
// <Body>
// <Text> </Text>
// <Text note numberOfLines={1}>0000 0000 0000 0000</Text>
// </Body>
// </ListItem>
// </List>
// }
// <TouchableOpacity disabled={creditcards.length == 0} onPress={InitAddCard} style={{flexDirection: 'row', alignItems: 'center', padding: 15, borderBottomWidth: 0.5, borderColor: 'lightgray'}}>
// <Image source={Assets.icons.topup} style={{width: 25, height: 25}} />
// <Text style={{fontFamily: 'Arial', fontSize: 16, marginLeft: 10, color: Theme.colors.textPrimary}}>
// Add New Card
// </Text>
// </TouchableOpacity>
// {creditcards.length > 0 && creditcards.map((card, index) => {
// return (
// <List key={index}>
// <ListItem thumbnail>
// <Left>
// <Thumbnail square source={getDisplayCard(card.cardType)} style={{resizeMode: "stretch"}} />
// </Left>
// <Body>
// <TouchableOpacity onPress={() => {
// Toast.show({
// text: "**** **** **** " + card.maskedPan + " is selected.",
// buttonText: "",
// duration: 1500
// })
// setActiveIndex(index)
// }}>
// <Text>{card.cardType.toString().toUpperCase()}</Text>
// <Text note numberOfLines={1}>**** **** **** {card.maskedPan}</Text>
// </TouchableOpacity>
// </Body>
// <Right>
// <Button
// icon
// transparent
// block
// small
// style={{padding: 0}}
// onPress={() => handleDelete(card.customer_id, card.paymentTokenId, card.uuid)}>
// <Icon name='md-trash' style={{color: Theme.colors.primaryDark}} />
// </Button>
// </Right>
// </ListItem>
// </List>
// )
// })}
// <View style={{marginBottom:60}}></View>
// </Content>
// <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-end', paddingBottom: 20, paddingHorizontal:20, position: 'absolute', width: '100%', bottom: 30, backgroundColor:'#eeeeee'}}>
// {topupCount > 5 ? null :
// <TouchableOpacity onPress={() => {
// InitCheckout()
// }} style={{padding: 20, paddingTop: 15, paddingBottom: 15, width: '100%', borderRadius: 10, backgroundColor: Theme.colors.primary}}>
// <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
// </TouchableOpacity>
// }
// </View>
// <Elements.popup visible={popup} message={`Transaction ${Task != "" ? Task : null}.`} />
// </SafeAreaView>
// );
// }

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

@ -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 = 3; CURRENT_PROJECT_VERSION = 4;
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 = 3; CURRENT_PROJECT_VERSION = 4;
DEVELOPMENT_TEAM = J29MB7XX75; DEVELOPMENT_TEAM = J29MB7XX75;
FRAMEWORK_SEARCH_PATHS = ( FRAMEWORK_SEARCH_PATHS = (
"$(inherited)", "$(inherited)",

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

Binary file not shown.

1
package.json
View File

@ -53,6 +53,7 @@
"react-native-push-notification": "^8.1.1", "react-native-push-notification": "^8.1.1",
"react-native-qrcode-svg": "^6.0.6", "react-native-qrcode-svg": "^6.0.6",
"react-native-reanimated": "^1.8.0", "react-native-reanimated": "^1.8.0",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-safe-area-context": "^4.2.5", "react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^2.4.0", "react-native-screens": "^2.4.0",
"react-native-snap-carousel": "^3.9.0", "react-native-snap-carousel": "^3.9.0",

9
yarn.lock
View File

@ -7438,7 +7438,7 @@ react-native-image-slider-box@^1.0.12:
dependencies: dependencies:
react-native-snap-carousel latest react-native-snap-carousel latest
react-native-iphone-x-helper@^1.3.0: react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
version "1.3.1" version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010" resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg== integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
@ -7501,6 +7501,13 @@ react-native-reanimated@^1.8.0:
dependencies: dependencies:
fbjs "^1.0.0" fbjs "^1.0.0"
react-native-responsive-fontsize@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/react-native-responsive-fontsize/-/react-native-responsive-fontsize-0.5.1.tgz#c39fa2212ecced2bac879211a7b25106534f72d2"
integrity sha512-G77iPzrf3BHxMxVm6G3Mw3vPImIdq+jLLXhYoOjWei6i9J3/jzUNUhNdRWvp49Csb5prhbVBLPM+pYZz+b3ESQ==
dependencies:
react-native-iphone-x-helper "^1.3.1"
react-native-safe-area-context@^4.2.5: react-native-safe-area-context@^4.2.5:
version "4.3.1" version "4.3.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade"