Skip to content

I
InvestCustomer
Commit 61905551 by Nguyễn Thị Thúy
Options

product detail UI

parents eabd3961 10e869c7
Showing with 1419 additions and 42 deletions
src/Screens/Transaction/DueDate/DueDate.js 0 → 100644
import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users';
import DueDateView from './DueDateView';
import I18n from '../../../helper/i18/i18n';
const DueDate = (props) => {
const [selected, setSelected] = useState('');
const [page, setPage] = useState(1);
const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL');
useEffect(() => {
getData();
}, [fillter]);
const getData = async () => {
setisRefresh(true);
setPage(1);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setisRefresh(false);
if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data);
setTotalPage(res.data.meta.pages);
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
getData();
};
const onLoadMore = () => {
console.log(tottalPage);
if (page < tottalPage) getDataLoadMore();
};
const getDataLoadMore = async () => {
setisRefresh(true);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setPage(page + 1);
if (res.data.code == 200) {
setData(data.concat(res.data.data));
}
setisRefresh(false);
};
return (
<DueDateView
onRefresh={onRefresh}
isRefresh={isRefresh}
onLoadMore={onLoadMore}
setFillters={setFillters}
fillter={fillter}
data={data}
/>
);
};
export default DueDate;
src/Screens/Transaction/DueDate/DueDateView.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
} from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item';
import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const Fillters = [
{
id: '1',
name: 'All',
value: 'ALL',
},
{
id: '2',
name: 'Deposit',
value: 'DEPOSIT',
},
{
id: '3',
name: 'Withdraw',
value: 'WITHDRAW',
},
{
id: '4',
name: 'Transfer',
value: 'TRANSFER',
},
];
const EscrowView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setFillters(e.value)}
style={[
styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null,
]}>
<AppText
i18nKey={e.name}
style={[
styles.txtFillter,
fillter == e.value ? {color: '#1473E6'} : {},
]}></AppText>
</TouchableOpacity>
))}
</ScrollView>
</View>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText
i18nKey={'NoData'}
style={{
fontSize: 18,
fontWeight: 'bold',
}}></AppText>
</View>
) : (
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
headerContainer: {
paddingVertical: 10,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
},
itemFillter: {
borderRadius: 10,
paddingVertical: 5,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#929292',
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
},
txtFillter: {
fontSize: getFontXD(36),
color: '#929292',
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(46),
fontWeight: 'bold',
},
});
export default EscrowView;
src/Screens/Transaction/DueDate/Item.js 0 → 100644
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Alert,
} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
toPriceVnd,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import Block from '../../../components/Block';
const Item = (props) => {
const {item} = props;
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row>
<View style={styles.wrapLeft}/>
<View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
marginTop: 10,
paddingVertical: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(39),
color: '#929292',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(42),
color: 'black',
},
imgIcon: {
width: WIDTHXD(178),
height: HEIGHTXD(178),
resizeMode: 'contain',
},
});
src/Screens/Transaction/Escrow/Escrow.js 0 → 100644
import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users';
import EscrowView from './EscrowView';
import I18n from '../../../helper/i18/i18n';
const Escrow = (props) => {
const [selected, setSelected] = useState('');
const [page, setPage] = useState(1);
const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL');
useEffect(() => {
getData();
}, [fillter]);
const getData = async () => {
setisRefresh(true);
setPage(1);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setisRefresh(false);
if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data);
setTotalPage(res.data.meta.pages);
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
getData();
};
const onLoadMore = () => {
console.log(tottalPage);
if (page < tottalPage) getDataLoadMore();
};
const getDataLoadMore = async () => {
setisRefresh(true);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setPage(page + 1);
if (res.data.code == 200) {
setData(data.concat(res.data.data));
}
setisRefresh(false);
};
return (
<EscrowView
onRefresh={onRefresh}
isRefresh={isRefresh}
onLoadMore={onLoadMore}
setFillters={setFillters}
fillter={fillter}
data={data}
/>
);
};
export default Escrow;
src/Screens/Transaction/Escrow/EscrowView.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
} from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item';
import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const Fillters = [
{
id: '1',
name: 'All',
value: 'ALL',
},
{
id: '2',
name: 'Deposit',
value: 'DEPOSIT',
},
{
id: '3',
name: 'Withdraw',
value: 'WITHDRAW',
},
{
id: '4',
name: 'Transfer',
value: 'TRANSFER',
},
];
const EscrowView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setFillters(e.value)}
style={[
styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null,
]}>
<AppText
i18nKey={e.name}
style={[
styles.txtFillter,
fillter == e.value ? {color: '#1473E6'} : {},
]}></AppText>
</TouchableOpacity>
))}
</ScrollView>
</View>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText
i18nKey={'NoData'}
style={{
fontSize: 18,
fontWeight: 'bold',
}}></AppText>
</View>
) : (
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
headerContainer: {
paddingVertical: 10,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
},
itemFillter: {
borderRadius: 10,
paddingVertical: 5,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#929292',
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
},
txtFillter: {
fontSize: getFontXD(36),
color: '#929292',
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(46),
fontWeight: 'bold',
},
});
export default EscrowView;
src/Screens/Transaction/Escrow/Item.js 0 → 100644
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Alert,
} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
toPriceVnd,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import Block from '../../../components/Block';
const Item = (props) => {
const {item} = props;
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row>
<View style={styles.wrapLeft}/>
<View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
marginTop: 10,
paddingVertical: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(39),
color: '#929292',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(42),
color: 'black',
},
imgIcon: {
width: WIDTHXD(178),
height: HEIGHTXD(178),
resizeMode: 'contain',
},
});
src/Screens/Transaction/PriceList/Item.js 0 → 100644
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Alert,
} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
toPriceVnd,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import Block from '../../../components/Block';
const Item = (props) => {
const {item} = props;
return (
<View style={styles.container}>
<TouchableOpacity onPress={()=> props.onPress(item)}>
<Block flex={1} row>
<View style={styles.wrapLeft}/>
<View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
marginTop: 10,
paddingVertical: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(39),
color: '#929292',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(42),
color: 'black',
},
imgIcon: {
width: WIDTHXD(178),
height: HEIGHTXD(178),
resizeMode: 'contain',
},
});
src/Screens/Transaction/PriceList/PriceList.js 0 → 100644
import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users';
import PriceListView from './PriceListView';
import I18n from '../../../helper/i18/i18n';
const PriceList = (props) => {
const [selected, setSelected] = useState('');
const [page, setPage] = useState(1);
const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL');
useEffect(() => {
getData();
}, [fillter]);
const getData = async () => {
setisRefresh(true);
setPage(1);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setisRefresh(false);
if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data);
setTotalPage(res.data.meta.pages);
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
getData();
};
const onLoadMore = () => {
console.log(tottalPage);
if (page < tottalPage) getDataLoadMore();
};
const getDataLoadMore = async () => {
setisRefresh(true);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setPage(page + 1);
if (res.data.code == 200) {
setData(data.concat(res.data.data));
}
setisRefresh(false);
};
return (
<PriceListView
onRefresh={onRefresh}
isRefresh={isRefresh}
onLoadMore={onLoadMore}
setFillters={setFillters}
fillter={fillter}
data={data}
/>
);
};
export default PriceList;
src/Screens/Transaction/PriceList/PriceListView.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
} from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item';
import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const Fillters = [
{
id: '1',
name: 'All',
value: 'ALL',
},
{
id: '2',
name: 'Deposit',
value: 'DEPOSIT',
},
{
id: '3',
name: 'Withdraw',
value: 'WITHDRAW',
},
{
id: '4',
name: 'Transfer',
value: 'TRANSFER',
},
];
const NotificaitonView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setFillters(e.value)}
style={[
styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null,
]}>
<AppText
i18nKey={e.name}
style={[
styles.txtFillter,
fillter == e.value ? {color: '#1473E6'} : {},
]}></AppText>
</TouchableOpacity>
))}
</ScrollView>
</View>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText
i18nKey={'NoData'}
style={{
fontSize: 18,
fontWeight: 'bold',
}}></AppText>
</View>
) : (
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
headerContainer: {
paddingVertical: 10,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
},
itemFillter: {
borderRadius: 10,
paddingVertical: 5,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#929292',
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
},
txtFillter: {
fontSize: getFontXD(36),
color: '#929292',
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(46),
fontWeight: 'bold',
},
});
export default NotificaitonView;
src/Screens/Transaction/TimeTransaction/Item.js 0 → 100644
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Alert,
} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
toPriceVnd,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import Block from '../../../components/Block';
const Item = (props) => {
const {item} = props;
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row>
<View style={styles.wrapLeft}/>
<View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
marginTop: 10,
paddingVertical: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(39),
color: '#929292',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(42),
color: 'black',
},
imgIcon: {
width: WIDTHXD(178),
height: HEIGHTXD(178),
resizeMode: 'contain',
},
});
src/Screens/Transaction/TimeTransaction/TimeTransaction.js 0 → 100644
import React, {useState, useEffect} from 'react';
import {getListNotification} from '../../../apis/Functions/users';
import TimeTransactionView from './TimeTransactionView';
import I18n from '../../../helper/i18/i18n';
const PriceList = (props) => {
const [selected, setSelected] = useState('');
const [page, setPage] = useState(1);
const [data, setData] = useState([]);
const [tottalPage, setTotalPage] = useState(1);
const [isRefresh, setisRefresh] = useState(false);
const [fillter, setFillters] = useState('ALL');
useEffect(() => {
getData();
}, [fillter]);
const getData = async () => {
setisRefresh(true);
setPage(1);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setisRefresh(false);
if ((res.data.code = 200 && res.data.data)) {
setData(res.data.data);
setTotalPage(res.data.meta.pages);
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
const onRefresh = () => {
getData();
};
const onLoadMore = () => {
console.log(tottalPage);
if (page < tottalPage) getDataLoadMore();
};
const getDataLoadMore = async () => {
setisRefresh(true);
const res = await getListNotification({
keyword: '',
platform: Platform.OS,
page_size: 10,
page_index: 1,
type: fillter,
});
setPage(page + 1);
if (res.data.code == 200) {
setData(data.concat(res.data.data));
}
setisRefresh(false);
};
return (
<TimeTransactionView
onRefresh={onRefresh}
isRefresh={isRefresh}
onLoadMore={onLoadMore}
setFillters={setFillters}
fillter={fillter}
data={data}
/>
);
};
export default PriceList;
src/Screens/Transaction/TimeTransaction/TimeTransactionView.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
} from 'react-native';
import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item';
import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText';
import {useNavigation} from '@react-navigation/native';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
const Fillters = [
{
id: '1',
name: 'All',
value: 'ALL',
},
{
id: '2',
name: 'Deposit',
value: 'DEPOSIT',
},
{
id: '3',
name: 'Withdraw',
value: 'WITHDRAW',
},
{
id: '4',
name: 'Transfer',
value: 'TRANSFER',
},
];
const NotificaitonView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{Fillters.map((e) => (
<TouchableOpacity
key={e.value}
onPress={() => setFillters(e.value)}
style={[
styles.itemFillter,
fillter == e.value ? {borderColor: '#1473E6'} : null,
]}>
<AppText
i18nKey={e.name}
style={[
styles.txtFillter,
fillter == e.value ? {color: '#1473E6'} : {},
]}></AppText>
</TouchableOpacity>
))}
</ScrollView>
</View>
{data.length == 0 ? (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<AppText
i18nKey={'NoData'}
style={{
fontSize: 18,
fontWeight: 'bold',
}}></AppText>
</View>
) : (
<FlatList
keyExtractor={(item) => item.id}
data={data}
refreshing={isRefresh}
onRefresh={onRefresh}
onEndReachedThreshold={0.01}
onEndReached={(info) => {
onLoadMore();
}}
renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/>
)}
</View>
);
};
const styles = StyleSheet.create({
headerContainer: {
paddingVertical: 10,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
},
itemFillter: {
borderRadius: 10,
paddingVertical: 5,
paddingHorizontal: 10,
borderWidth: 1,
borderColor: '#929292',
justifyContent: 'center',
alignItems: 'center',
marginRight: 10,
},
txtFillter: {
fontSize: getFontXD(36),
color: '#929292',
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(46),
fontWeight: 'bold',
},
});
export default NotificaitonView;
src/Screens/Transaction/Transaction.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StatusBar, SafeAreaView} from 'react-native';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import DueDate from './DueDate/DueDate';
import Escrow from './Escrow/Escrow';
import PriceList from './PriceList/PriceList';
import TimeTransaction from './TimeTransaction/TimeTransaction';
import I18n from '../../helper/i18/i18n';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
import HeaderDrawer from '../../components/Header/HeaderDrawer';
const NewFeed = (props) => {
return (
<View style={{flex: 1}}>
<HeaderDrawer title={'Tradding'} isWhite={true} />
<View style={{flex: 1, backgroundColor: 'white'}}>
<Tab.Navigator
initialRouteName="PriceList"
swipeEnabled={false}
tabBarOptions={{
scrollEnabled: true,
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
}}>
<Tab.Screen
name="PriceList"
component={PriceList}
options={{tabBarLabel: I18n.t('Price_List')}}
/>
<Tab.Screen
name="TimeTransaction"
component={TimeTransaction}
options={{tabBarLabel: I18n.t('Time_Transaction')}}
/>
<Tab.Screen
name="Escrow"
component={Escrow}
options={{tabBarLabel: I18n.t('Escrow')}}
/>
<Tab.Screen
name="DueDate"
component={DueDate}
options={{tabBarLabel: I18n.t('Due_Date')}}
/>
</Tab.Navigator>
</View>
</View>
);
};
export default NewFeed;
src/assets/images.js
...@@ -67,6 +67,8 @@ const images = { ...@@ -67,6 +67,8 @@ const images = {
iconPaper: require('./images/iconPaper.png'), iconPaper: require('./images/iconPaper.png'),
iconNote: require('./images/iconNote.png'), iconNote: require('./images/iconNote.png'),
bg_cannot_connect: require('./images/bg_cannot_connect.png'), bg_cannot_connect: require('./images/bg_cannot_connect.png'),
iconDown: require('./images/iconDown.png'),
iconUp: require('./images/iconUp.png'),
}; };
export default images; export default images;
src/components/Header/Drawer.js
import React from 'react'; import React, {useState} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'; import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
ScrollView,
} from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {HEIGHTXD, getFontXD, WIDTHXD} from '../../Config/Functions'; import {HEIGHTXD, getFontXD, WIDTHXD} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
...@@ -15,23 +22,118 @@ import { ...@@ -15,23 +22,118 @@ import {
PROFILE, PROFILE,
CONTRACT, CONTRACT,
LEGALDOCUMENT, LEGALDOCUMENT,
MYGROUP,
PAYMENTS,
DEPOSIT,
WITHDRAW,
ROSE,
HISTORY,
CHOOSEMETHOD,
} from '../../routers/ScreenNames'; } from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import AppText from '../AppText'; import AppText from '../AppText';
import images from '../../assets/images';
const menus = [ const menus = [
{ {
id: '1', id: '1',
title: 'AccountVerify', title: 'Profile',
icon: R.images.iconUserCheck, icon: R.images.iconUserCheck,
screen: AccountVerification, screen: AccountVerification,
active: false,
children: [
{
id: '11',
title: 'MyProfile',
icon: R.images.iconUserCheck,
screen: PROFILE,
},
{
id: '12',
title: 'VerifyAccount',
icon: R.images.iconUserCheck,
screen: AccountVerification,
},
{
id: '15',
title: 'MyPartner',
icon: R.images.iconUserCheck,
screen: MYGROUP,
},
{
id: '13',
title: 'Payments',
icon: R.images.iconUserCheck,
screen: PAYMENTS,
},
{
id: '14',
title: 'Contract',
icon: R.images.iconUserCheck,
screen: CONTRACT,
},
],
}, },
{ {
id: '6', id: '6',
title: 'Contract', title: 'Finance',
icon: R.images.iconContract, icon: R.images.iconContract,
screen: CONTRACT, screen: CONTRACT,
active: false,
children: [
{
id: '61',
title: 'Deposit',
icon: R.images.iconUserCheck,
screen: CHOOSEMETHOD,
},
{
id: '62',
title: 'Withdraw',
icon: R.images.iconUserCheck,
screen: WITHDRAW,
},
{
id: '63',
title: 'Rose',
icon: R.images.iconUserCheck,
screen: ROSE,
},
{
id: '64',
title: 'History',
icon: R.images.iconUserCheck,
screen: HISTORY,
},
],
},
{
id: '8',
title: 'Support',
icon: R.images.iconContract,
screen: CONTRACT,
active: false,
children: [
{
title: 'CustomerCare',
icon: R.images.iconPhone,
screen: SERVICECUSTOMER,
id: '81',
},
{
id: '82',
title: 'Feedback',
icon: R.images.iconUserCheck,
screen: FEEDBACK,
},
{
id: '83',
title: 'LegalDocument',
icon: R.images.iconUserCheck,
screen: LEGALDOCUMENT,
},
],
}, },
{ {
...@@ -39,35 +141,22 @@ const menus = [ ...@@ -39,35 +141,22 @@ const menus = [
title: 'PaymentSetting', title: 'PaymentSetting',
icon: R.images.iconMethodPay, icon: R.images.iconMethodPay,
screen: METHODPAY, screen: METHODPAY,
}, active: false,
{ children: null,
id: '3',
title: 'CustomerCare',
icon: R.images.iconPhone,
screen: SERVICECUSTOMER,
},
{
id: '4',
title: 'Feedback',
icon: R.images.iconMess,
screen: FEEDBACK,
},
{
id: '7',
title: 'LegalDocument',
icon: R.images.iconPaper,
screen: LEGALDOCUMENT,
}, },
{ {
id: '5', id: '5',
title: 'Setting', title: 'Setting',
icon: R.images.iconSetting, icon: R.images.iconSetting,
screen: SETTING, screen: SETTING,
active: false,
children: null,
}, },
]; ];
const Drawer = (props) => { const Drawer = (props) => {
const navigate = useNavigation(); const navigate = useNavigation();
const [listMenu, setListMenu] = useState(menus);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
...@@ -88,20 +177,64 @@ const Drawer = (props) => { ...@@ -88,20 +177,64 @@ const Drawer = (props) => {
<Image source={R.images.iconRight2} style={styles.imgIcon} /> <Image source={R.images.iconRight2} style={styles.imgIcon} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.body}> <ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
{menus.map((e) => ( {listMenu.map((e) => (
<TouchableOpacity <View>
onPress={() => { <TouchableOpacity
navigate.navigate(e.screen); onPress={() => {
props.toggleModal(); if (e.children) {
}} const newList = listMenu.map((temp) => {
key={e.id} if (temp.id == e.id) return {...temp, active: !temp.active};
style={styles.containerItem}> return temp;
<Image source={e.icon} style={styles.imgIcon} /> });
<AppText i18nKey={e.title} style={styles.txtTitle}></AppText>
</TouchableOpacity> setListMenu(newList);
} else {
navigate.navigate(e.screen);
props.toggleModal();
}
}}
key={e.id}
style={styles.containerItem}>
<View style={styles.row}>
<Image source={e.icon} style={styles.imgIcon} />
<AppText
i18nKey={e.title}
style={[
styles.txtTitle,
e.children ? {fontWeight: 'bold'} : null,
e.active ? {color: R.colors.main} : null,
]}></AppText>
</View>
{e.children ? (
<Image
source={e.active ? images.iconUp : images.iconDown}
style={styles.imgIcon}
/>
) : null}
</TouchableOpacity>
{e.active && e.children ? (
<View style={{marginLeft: 15}}>
{e.children.map((item) => (
<TouchableOpacity
onPress={() => {
navigate.navigate(item.screen);
props.toggleModal();
}}
key={item.id}
style={styles.containerItem}>
<Image source={item.icon} style={styles.imgIcon} />
<AppText
i18nKey={item.title}
style={styles.txtTitle}></AppText>
</TouchableOpacity>
))}
</View>
) : null}
</View>
))} ))}
</View> </ScrollView>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
...@@ -175,12 +308,13 @@ const styles = StyleSheet.create({ ...@@ -175,12 +308,13 @@ const styles = StyleSheet.create({
containerItem: { containerItem: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
marginVertical: 10, marginVertical: 5,
borderRadius: WIDTHXD(75), borderRadius: WIDTHXD(75),
paddingVertical: 10, paddingVertical: 10,
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
row: {flexDirection: 'row', flex: 1, alignItems: 'center'},
}); });
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
......
src/components/Header/HeaderHome.js
...@@ -31,9 +31,8 @@ import { ...@@ -31,9 +31,8 @@ import {
PROFILE, PROFILE,
AccountVerification, AccountVerification,
WALLETWITHDRAW, WALLETWITHDRAW,
PACKETCQG, PRODUCTDETAIL, PACKETCQG,
} from '../../routers/ScreenNames'; } from '../../routers/ScreenNames';
import ProductDetail from '../../Screens/Tradding/ProductDetail/ProductDetail';
const renderWallet = (status, current_money, current_cqg_money, contract) => { const renderWallet = (status, current_money, current_cqg_money, contract) => {
const navigate = useNavigation(); const navigate = useNavigation();
...@@ -114,7 +113,7 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => { ...@@ -114,7 +113,7 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<TouchableOpacity <TouchableOpacity
disabled={status == 2 ? true : false} disabled={status == 2 ? true : false}
onPress={() => navigate.navigate(PRODUCTDETAIL)}> onPress={() => navigate.navigate(AccountVerification)}>
<ImageBackground <ImageBackground
imageStyle={{borderRadius: 10}} imageStyle={{borderRadius: 10}}
style={{ style={{
......
src/helper/i18/locales/en.js
...@@ -208,4 +208,10 @@ export default { ...@@ -208,4 +208,10 @@ export default {
PriceRange: 'Price range', PriceRange: 'Price range',
FirstNotifyDate: 'First notify date', FirstNotifyDate: 'First notify date',
EndlessTransactionDate: 'Endless transaction date', EndlessTransactionDate: 'Endless transaction date',
Finance: 'Finance',
Support: 'Hỗ trợ',
Support_Customer: 'Support Customer',
Price_List: 'Price list',
Time_Transaction: 'Time transaction',
Due_Date: 'Due date',
}; };
src/helper/i18/locales/vn.js
...@@ -213,4 +213,10 @@ export default { ...@@ -213,4 +213,10 @@ export default {
PriceRange: 'Biên độ giá', PriceRange: 'Biên độ giá',
FirstNotifyDate: 'Ngày thông báo đầu tiên', FirstNotifyDate: 'Ngày thông báo đầu tiên',
EndlessTransactionDate: 'Ngày giao dịch cuối cùng', EndlessTransactionDate: 'Ngày giao dịch cuối cùng',
Finance: 'Tài chính',
Support: 'Hỗ trợ',
Support_Customer: 'Hỗ trợ khách hàng',
Price_List: 'Bảng phí',
Time_Transaction: 'Thời gian GD',
Due_Date: 'Lịch đáo hạn',
}; };
src/routers/StackNavigation.js
...@@ -45,7 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer'; ...@@ -45,7 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer';
import Partner from '../Screens/LegalDocument/Partner'; import Partner from '../Screens/LegalDocument/Partner';
import SnackBar from '../components/SnackBar'; import SnackBar from '../components/SnackBar';
import DetailHistory from '../Screens/Action/History/DetailHistory'; import DetailHistory from '../Screens/Action/History/DetailHistory';
import ProductDetail from '../Screens/Tradding/ProductDetail/ProductDetail'; import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
......
src/routers/TabNavigation.js
...@@ -15,6 +15,7 @@ import NewFeed from '../Screens/NewFeed/NewFeed'; ...@@ -15,6 +15,7 @@ import NewFeed from '../Screens/NewFeed/NewFeed';
import Notification from '../Screens/Notification/Notification'; import Notification from '../Screens/Notification/Notification';
import Test from '../Screens/NewFeed/Test'; import Test from '../Screens/NewFeed/Test';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import Transaction from '../Screens/Transaction/Transaction';
import {AccountVerification, PACKETCQG} from '../routers/ScreenNames'; import {AccountVerification, PACKETCQG} from '../routers/ScreenNames';
import I18n from '../helper/i18/i18n'; import I18n from '../helper/i18/i18n';
import {changeLanguage} from '../actions/language'; import {changeLanguage} from '../actions/language';
...@@ -81,9 +82,9 @@ const TabNavigator = (props) => { ...@@ -81,9 +82,9 @@ const TabNavigator = (props) => {
<Tab.Screen <Tab.Screen
name="Screen2" name="Screen2"
component={Account} component={Transaction}
options={{ options={{
tabBarLabel: I18n.t('Account'), tabBarLabel: I18n.t('Tradding'),
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<Icon name="user-tie" size={size} color={color} /> <Icon name="user-tie" size={size} color={color} />
), ),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment