update screen customer support

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/helper/i18/locales/en.js

@@ -61,8 +61,9 @@ 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',
@@ -220,4 +221,8 @@ 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:',
 };

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,10 @@ 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:',
 };