Skip to content

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

complete price UI

parents 832c6186 28959be9
Showing with 404 additions and 61 deletions
App.js
......@@ -7,7 +7,6 @@ import rootReducer from './src/Reducers/index';
import RootView from './src/RootView';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './src/Saga/rootSaga';
import FirebaseNotification from './src/helper/FirebaseNotification';
let bootSplashLogo = require('./src/assets/images/iconSplash.png');
......
package.json
......@@ -33,6 +33,7 @@
"react-native-confirmation-code-field": "^6.5.1",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^8.1.2",
"react-native-dropdownalert": "^4.3.0",
"react-native-fast-image": "^8.3.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-i18n": "^2.0.15",
......@@ -41,6 +42,7 @@
"react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.7.0",
"react-native-modal-dropdown": "^1.0.0",
"react-native-ratings": "^8.0.4",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
......
src/RootView.js
import React, {useEffect} from 'react';
import {View, Text, ImageBackground, StyleSheet, StatusBar} from 'react-native';
import {
View,
Text,
ImageBackground,
StyleSheet,
StatusBar,
SafeAreaView,
} from 'react-native';
import {connect} from 'react-redux';
import StackNavigation from './routers/StackNavigation';
......@@ -10,12 +17,12 @@ import NoInternetComponent from './components/NoInternet';
import DeviceInfo from 'react-native-device-info';
import VersionChecker from './Screens/VersionChecker';
import DropDown from './components/DropDown';
enableScreens();
const RootView = (props) => {
useEffect(() => {
}, []);
useEffect(() => {}, []);
const checkVersion = (props) => {
const verCurrent = DeviceInfo.getVersion();
......@@ -25,13 +32,14 @@ const RootView = (props) => {
return (
<>
<View style={{flex: 1}}>
{/* <DropDown /> */}
<Modal isVisible={props.loadingModal.isVisible}>
<SkypeIndicator color={'white'} />
</Modal>
<StackNavigation />
</View>
{/*<VersionChecker/>*/}
<NoInternetComponent />
</>
);
......
src/Screens/Feedback/FeedbackView.js
......@@ -23,6 +23,17 @@ import PickerImg from '../../components/Picker/PickerImg';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
import Button from '../../components/Button';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import {Rating, AirbnbRating} from 'react-native-ratings';
const radio_props = [
{label: I18n.t('VeryBad'), value: 0},
{label: I18n.t('Bad'), value: 1},
{label: I18n.t('Normal'), value: 2},
{label: I18n.t('Good'), value: 3},
{label: I18n.t('VeryGood'), value: 4},
];
const FeedbackView = (props) => {
const [isSelected, setIsSelected] = useState('');
......@@ -47,43 +58,23 @@ const FeedbackView = (props) => {
setImageAdd(temp);
};
const ratingCompleted = (rating) => {
console.log('Rating is: ' + rating);
};
return (
<KeyboardAvoidingView
behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
style={{flex: 1}}
style={{flex: 1, backgroundColor: 'white'}}
keyboardVerticalOffset={-50}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'SendFeedback'} />
<View style={styles.container}>
<Text style={styles.txt}>Review</Text>
<RadioForm animation={true}>
{radio_props.map((obj, i) => (
<RadioButton labelHorizontal={true} key={i}>
<RadioButtonInput
obj={obj}
index={i}
isSelected={isSelected === i}
onPress={onPress}
r
borderWidth={1}
buttonColor={isSelected === i ? '#1473E6' : '#C5C5C5'}
buttonSize={10}
buttonOuterSize={18}
buttonStyle={{marginLeft: 20, marginVertical: 10}}
/>
<RadioButtonLabel
obj={obj}
index={i}
labelColor={'#001C51'}
onPress={onPress}
labelStyle={{fontSize: 16, paddingLeft: 16}}
/>
</RadioButton>
))}
</RadioForm>
<AppText style={styles.txt} i18nKey={'FeedBackDCV'} />
<Rating
onFinishRating={ratingCompleted}
style={{paddingVertical: 10}}
/>
<View style={styles.footer}>
<TextInput
style={styles.txtInput}
......@@ -107,6 +98,7 @@ const FeedbackView = (props) => {
imageStyle={{
width: WIDTHXD(330),
height: HEIGHTXD(250),
borderRadius: 5,
}}
style={{
width: WIDTHXD(330),
......@@ -122,7 +114,7 @@ const FeedbackView = (props) => {
}}
onPress={() => onClickClose(index)}>
<Image
style={{height: 30, width: 30}}
style={{height: 20, width: 20}}
source={R.images.iconClose}
/>
</TouchableOpacity>
......@@ -131,7 +123,7 @@ const FeedbackView = (props) => {
))}
</ScrollView>
) : (
<PickerImg title={'addd'} onClickImage={onClickImages} />
<PickerImg title={''} onClickImage={onClickImages} />
)}
</View>
</View>
......@@ -182,6 +174,7 @@ const styles = StyleSheet.create({
},
containerBtn: {
marginBottom: 30,
backgroundColor: 'white',
},
});
......
src/Screens/Home/ItemPrice.js
......@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
},
txtTime: {
marginTop: HEIGHTXD(10),
marginTop: HEIGHTXD(6),
fontSize: getFontXD(32),
color: 'black',
},
......@@ -197,6 +197,6 @@ const styles = StyleSheet.create({
marginLeft: WIDTHXD(35),
},
txtMoney: {
fontSize: getFontXD(40),
fontSize: getFontXD(34),
},
});
src/Screens/Home/SwiperComponent.js
......@@ -7,8 +7,9 @@ import {HEIGHTXD} from '../../Config/Functions';
const styles = StyleSheet.create({
container: {
marginHorizontal: 20,
marginBottom: 10,
width: '100%',
height: HEIGHTXD(400),
marginTop: 25,
borderBottomColor: R.colors.borderGray,
......@@ -33,25 +34,27 @@ const SwiperComponent = (props) => {
return (
<View style={styles.container}>
<Swiper
dotColor={R.colors.color777}
activeDotColor={R.colors.white}
paginationStyle={{bottom: 5}}
style={styles.wrapper}
loop={true}
autoplay={true}>
<View style={{marginHorizontal: 20, borderRadius: 10}}>
<View style={{borderRadius: 10}}>
<Image
style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
source={{uri: props.listImage[0].url}}
resizeMode={'cover'}
/>
</View>
<View style={{marginHorizontal: 20, borderRadius: 10}}>
<View style={{borderRadius: 10}}>
<Image
style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
source={{uri: props.listImage[1].url}}
resizeMode={'cover'}
/>
</View>
<View style={{marginHorizontal: 20, borderRadius: 10}}>
<View style={{borderRadius: 10}}>
<Image
style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
source={{uri: props.listImage[2].url}}
......
src/Screens/ServiceCustomer/ServiceCustomerView.js
import React from 'react';
import {View, Text} from 'react-native';
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import R from '../../assets/R';
import AppText from '../../components/AppText';
import TextMulti from '../../components/Input/TextMulti';
import I18n from '../../helper/i18/i18n';
import HeaderBack from '../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import {TouchableOpacity} from 'react-native-gesture-handler';
const ServiceCustomerView = (props) => {
const [content, setContent] = useState('');
const [data, setData] = useState({
company: 'CÔNG TY CP TƯ VẤN ĐẦU TƯ DCV.',
address:
'Tầng L2, Tòa Nhà Mỹ Sơn, Số 62 Nguyễn Huy Tưởng, Phường Thanh Xuân Trung, Quận Thanh Xuân, Thành Phố Hà Nội',
email: 'sale@dcv.vn',
website: 'https://dcvinvest.com',
hotline: '024.9999.8669',
time:
'Thứ 2 - Thứ 6: 08:00 - 18:00 \nThứ 7: 10:00 - 14:00 \nChủ nhật: 09:00 - 12:00',
});
return (
<View style={{flex: 1}}>
<HeaderBack title={'CustomerCare'} />
<View
style={{
flex: 1,
paddingHorizontal: 20,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 10,
paddingTop: 10,
}}>
<AppText
i18nKey={'Features_develop'}
<AppText i18nKey={'HaNoiOffice'} style={styles.title} />
<Text style={styles.txtContent}>{data.company}</Text>
<AppText i18nKey={'Address'} style={styles.title} />
<Text style={styles.txtContent}>{data.address}</Text>
<View style={styles.row}>
<AppText i18nKey={'Email'} style={styles.title} />
<Text style={styles.txtContent}> {data.email}</Text>
</View>
<View style={styles.row}>
<Text style={styles.title}>Website: </Text>
<Text style={styles.txtContent}>{data.website}</Text>
</View>
<AppText i18nKey={'HotLine'} style={styles.title} />
<Text style={styles.txtContent}>{data.hotline}</Text>
<AppText i18nKey={'WorkingTime'} style={styles.title} />
<Text style={styles.txtContent}>{data.time}</Text>
<View style={{marginTop: 20, flex: 1}}>
<TextMulti
onChangeText={(val) => setContent(val)}
title={I18n.t('ContentRequire')}
/>
</View>
<View
style={{
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
}}
/>
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
}}>
<TouchableOpacity style={styles.btn}>
<AppText style={styles.txtBtn} i18nKey={'Send'} />
</TouchableOpacity>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
title: {
fontSize: getFontXD(42),
color: R.colors.main,
marginTop: 5,
},
txtContent: {
fontSize: getFontXD(42),
marginTop: 5,
},
row: {
flexDirection: 'row',
},
btn: {
width: WIDTHXD(500),
height: HEIGHTXD(120),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.main,
borderRadius: 5,
},
txtBtn: {
fontSize: getFontXD(46),
color: R.colors.white,
fontWeight: 'bold',
},
});
export default ServiceCustomerView;
src/components/DropDown.js 0 → 100644
import React, {useRef, useEffect, useState} from 'react';
import {StyleSheet, SafeAreaView, Text, View} from 'react-native';
import {
PURPLE_COLOR,
WHITE_COLOR,
ITEMS,
ReactNativeLogo,
InfoIcon,
} from './constants';
import List from './List';
import DropdownAlert from 'react-native-dropdownalert';
const DropDown = () => {
const [queueSize, setQueueSize] = useState(0);
let dropDownAlertRef = useRef(null);
useEffect(() => {
dropDownAlertRef.alertWithType('error', 'ads', 'message');
}, []);
const _onProgrammaticClose = () => {
dropDownAlertRef.closeAction();
};
const _onProgrammaticClear = () => {
dropDownAlertRef.clearQueue();
};
const _showAlertQueue = () => {
const types = ['info', 'warn', 'error', 'success', 'custom'];
const message =
'Officia eu do labore incididunt consequat sunt sint ullamco cillum.';
let count = 1;
types.map((type) => {
dropDownAlertRef.alertWithType(
type,
`Alert ${count} of ${types.length}`,
message,
);
count++;
});
};
const _onSelect = ({item}) => {
switch (item.type) {
case 'close':
_onProgrammaticClose();
break;
case 'clear':
_onProgrammaticClear();
break;
case 'show':
_showAlertQueue();
break;
default:
const inMilliSeconds = Math.floor(Math.random() * 4000 + 1);
const inSeconds = (inMilliSeconds / 1000).toFixed(2);
const title = `${item.type} closes in ${inSeconds}s`;
let payload;
if (item.type === 'custom') {
// example using remote image source in payload
payload = {source: ReactNativeLogo};
} else if (item.type === 'info') {
// example using local image source in payload
payload = {source: InfoIcon};
}
dropDownAlertRef.alertWithType(
item.type,
title,
item.message,
payload,
inMilliSeconds,
);
}
_updateQueueSize();
};
const _onClose = (data) => {
console.log(data);
_updateQueueSize();
};
const _onCancel = (data) => {
console.log(data);
_updateQueueSize();
};
const _onTap = (data) => {
console.log(data);
_updateQueueSize();
};
const _updateQueueSize = () => {
setQueueSize(dropDownAlertRef.getQueueSize());
};
return (
<DropdownAlert
ref={(ref) => {
if (ref) {
dropDownAlertRef = ref;
}
}}
containerStyle={styles.content}
showCancel={true}
onCancel={_onCancel}
onTap={_onTap}
titleNumOfLines={2}
messageNumOfLines={0}
onClose={_onClose}
/>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: WHITE_COLOR,
justifyContent: 'center',
},
content: {
backgroundColor: PURPLE_COLOR,
zIndex: 10,
},
size: {
textAlign: 'center',
fontSize: 26,
fontWeight: 'bold',
marginVertical: 8,
},
});
export default DropDown;
src/components/Header/Drawer.js
......@@ -124,7 +124,7 @@ const menus = [
active: false,
children: [
{
title: 'CustomerCare',
title: 'contact',
icon: R.images.iconPhone,
screen: SERVICECUSTOMER,
id: '81',
......
src/components/Header/HeaderHome.js
......@@ -200,6 +200,7 @@ const HeaderHome = (props) => {
<View style={styles.container}>
<SnackBar />
<StatusBar backgroundColor="transparent" translucent={true} />
<View
style={{
justifyContent: 'center',
......
src/components/List.js 0 → 100644
import React from 'react';
import {StyleSheet, Text, Pressable, FlatList} from 'react-native';
const Button = () => ({
item = {title: '', type: '', color: '#202020'},
onSelect = () => {},
}) => {
const text = item.title ? item.title : item.type;
return (
<Pressable
style={[styles.button, {borderColor: item.color}]}
onPress={() => onSelect({item})}>
<Text style={[styles.text, {color: item.color}]}>{text}</Text>
</Pressable>
);
};
const List = ({items = [], onSelect = () => {}}) => {
return (
<FlatList
keyExtractor={(item) => item.type}
data={items}
numColumns={3}
renderItem={({item}) => {
return <Button item={item} onSelect={onSelect} />;
}}
/>
);
};
const styles = StyleSheet.create({
button: {
flex: 1,
borderRadius: 8,
margin: 4,
borderWidth: 1,
},
text: {
margin: 8,
fontSize: 20,
textAlign: 'center',
fontWeight: 'bold',
},
});
export default List;
src/components/constants.js 0 → 100644
export const PURPLE_COLOR = '#6441A4';
export const WHITE_COLOR = 'whitesmoke';
export const ITEMS = [
{
color: '#2B73B6',
type: 'info',
message:
"System is going down at 12 AM tonight for routine maintenance. We'll notify you when the system is back online.",
},
{
color: '#cd853f',
type: 'warn',
message:
'Your cloud drive is about to reach capacity. Please consider upgrading to premium plan.',
},
{
color: '#cc3232',
type: 'error',
message:
"Sorry, we're having some technical difficulties. Our team will get this fixed for you ASAP.",
},
{
color: '#32A54A',
type: 'success',
message:
"Thank you for your order. We will email and charge you when it's on it's way.",
},
{
color: PURPLE_COLOR,
type: 'custom',
message:
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
},
{type: 'close', title: 'close'},
{type: 'show', title: 'enqueue all alerts'},
{type: 'clear', title: 'clear queue'},
];
export const ReactNativeLogo =
'https://reactnative.dev/docs/assets/favicon.png';
export const InfoIcon = require('../assets/images/addImg.png');
src/helper/i18/locales/en.js
......@@ -61,9 +61,11 @@ export default {
Status: 'Status',
Phone: 'Phone',
Enter_Phone: 'Enter phone',
Address: 'Address',
Address: 'Address:',
Update: 'Update',
Send: 'Send',
ContactCode: 'Contact code',
TraddingAccountName: 'Tradding account name',
TraddingAccountNumber: 'Tradding account number',
GeneralInformation: 'General information',
......@@ -220,4 +222,9 @@ export default {
'A new version of DCVInvest is available. Update now to continue using and experiencing the latest system features!',
FirstPriceRange: 'First price range',
ExpandPriceRange: 'Expand price range',
HaNoiOffice: 'Ha Noi Office:',
HotLine: 'HotLine:',
WorkingTime: 'Working time:',
ContentRequire: 'Content require:',
FeedBackDCV: 'Feedback for DCV Invest',
};
src/helper/i18/locales/vn.js
......@@ -64,7 +64,7 @@ export default {
Male: 'Giới tính',
Status: 'Trạng thái',
Phone: 'Điện thoại',
Address: 'Địa chỉ',
Address: 'Địa chỉ:',
Update: 'Cập nhật',
ContactCode: 'Mã hợp đồng',
TraddingAccountName: 'Tên tài khoản giao dịch',
......@@ -104,7 +104,7 @@ export default {
Here: 'Tại đây',
Open_account_demo: 'Bạn có thể mở tài khoản thử',
Features_develop: 'Không có dữ liệu!',
Email: 'Email',
Email: 'Email:',
Password: 'Mật khẩu',
Login: 'Đăng nhập',
Register: 'Đăng ký',
......@@ -115,6 +115,7 @@ export default {
Verify_code: 'Mã xác thực:',
Continue: 'Tiếp tục',
Re_send: 'Gửi lại',
Send: 'Gửi',
Copied: 'Đã sao chép!',
Please_fill_in: 'Vui lòng điền ',
RequestFilter: 'Lọc yêu cầu',
......@@ -221,7 +222,11 @@ export default {
Due_Date: 'Lịch đáo hạn',
Enter_Phone: 'Nhập số điện thoại',
Version: 'Phiên bản',
UpdateDescription: 'Đã có phiên bản DCVInvest mới. Cập nhật ngay để tiếp tục sử dụng và trải nghiệm những tính năng mới nhất của hệ thống!',
FirstPriceRange:'Giới hạn giá ban đầu',
ExpandPriceRange:'Giới hạn giá mở rộng',
UpdateDescription:
'Đã có phiên bản DCVInvest mới. Cập nhật ngay để tiếp tục sử dụng và trải nghiệm những tính năng mới nhất của hệ thống!',
HaNoiOffice: 'Văn phòng Hà Nội:',
HotLine: 'Đường dây nóng:',
WorkingTime: 'Thời gian làm việc:',
ContentRequire: 'Nội dung yêu cầu:',
FeedBackDCV: 'Đánh giá dịch vụ của DCV Invest',
};
yarn.lock
......@@ -2872,6 +2872,11 @@ core-js-compat@^3.8.1:
browserslist "^4.16.3"
semver "7.0.0"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
core-js@^2.2.2, core-js@^2.4.1:
version "2.6.12"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz"
......@@ -3704,6 +3709,19 @@ fbjs-scripts@^1.1.0:
semver "^5.1.0"
through2 "^2.0.0"
fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
fbjs@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz"
......@@ -6688,6 +6706,14 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@15.5.10:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
integrity sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz"
......@@ -6801,6 +6827,13 @@ react-native-device-info@^8.1.2:
resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.1.2.tgz#142f2f05e27689858d5aa73dae36f0c37c965031"
integrity sha512-5jaQBL42H3g8+KXkFlIy2lMyKyPPETI8eUYgEg7JylW7rltkMPngn/wDnupgP4NhDYI+fBdMRGdRjEeetFr0IQ==
react-native-dropdownalert@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/react-native-dropdownalert/-/react-native-dropdownalert-4.3.0.tgz#56b612d63576387fa1a507b4158d92e7b7638af3"
integrity sha512-fXs18A23nrTB95jkTdP7c9TzoSZU0xS9F4lxMzwW1DFI08Nm62S4X00UqWu+Ong+TBDDP18/aF7b50T67Z26EQ==
dependencies:
prop-types "15.5.10"
react-native-fast-image@^8.3.4:
version "8.3.4"
resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.3.4.tgz#79edca177e30311b19d59ff335625bcbe22650d7"
......@@ -6869,6 +6902,13 @@ react-native-progress@^4.1.2:
"@react-native-community/art" "^1.1.2"
prop-types "^15.7.2"
react-native-ratings@^8.0.4:
version "8.0.4"
resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-8.0.4.tgz#efd5ebad8acc08bf98d34d39b18fb7a6813ef991"
integrity sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==
dependencies:
lodash "^4.17.15"
react-native-reanimated@^1.13.2:
version "1.13.2"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.13.2.tgz"
......
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