Merge remote-tracking branch 'origin/devTung-Mar-16' into Develop_March

ios/Invest/AppDelegate.m

@@ -16,7 +16,7 @@
 #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
 #import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
 #import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
-#import <CallAppSDK/CallAppInterface.h>
+//#import <CallAppSDK/CallAppInterface.h>
 
 static void InitializeFlipper(UIApplication *application) {
   FlipperClient *client = [FlipperClient sharedClient];
@@ -53,7 +53,7 @@ static void InitializeFlipper(UIApplication *application) {
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
   
-  [CallAppInterface setHomeViewController:rootViewController];
+//  [CallAppInterface setHomeViewController:rootViewController];
   return YES;
 }
 

ios/Invest/Info.plist

@@ -45,20 +45,15 @@
 	<array>
 		<string>AntDesign.ttf</string>
 		<string>Entypo.ttf</string>
-		<string>EvilIcons.ttf</string>
-		<string>Feather.ttf</string>
+		<string>Ionicons.ttf</string>
 		<string>FontAwesome.ttf</string>
 		<string>FontAwesome5_Brands.ttf</string>
 		<string>FontAwesome5_Regular.ttf</string>
 		<string>FontAwesome5_Solid.ttf</string>
-		<string>Fontisto.ttf</string>
-		<string>Foundation.ttf</string>
-		<string>Ionicons.ttf</string>
-		<string>MaterialCommunityIcons.ttf</string>
 		<string>MaterialIcons.ttf</string>
-		<string>Octicons.ttf</string>
-		<string>SimpleLineIcons.ttf</string>
-		<string>Zocial.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>
@@ -77,9 +72,9 @@
 		<string>UIInterfaceOrientationPortrait</string>
 	</array>
 	<key>BGTaskSchedulerPermittedIdentifiers</key>
-<array>
-    <string>dcv.investcustomer.vn</string>
-</array>
+	<array>
+		<string>dcv.investcustomer.vn</string>
+	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

ios/Podfile

@@ -81,7 +81,6 @@ target 'Invest' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
-  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
 
  
 

ios/Podfile.lock

@@ -325,10 +325,6 @@ PODS:
   - React-jsinspector (0.62.2)
   - react-native-safe-area-context (3.1.9):
     - React-Core
-  - react-native-vnpay-merchant (1.0.0):
-    - React
-  - react-native-webview (11.2.5):
-    - React-Core
   - React-RCTActionSheet (0.62.2):
     - React-Core/RCTActionSheetHeaders (= 0.62.2)
   - React-RCTAnimation (0.62.2):
@@ -464,8 +460,6 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
-  - react-native-vnpay-merchant (from `../node_modules/react-native-vnpay-merchant`)
-  - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -553,10 +547,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
-  react-native-vnpay-merchant:
-    :path: "../node_modules/react-native-vnpay-merchant"
-  react-native-webview:
-    :path: "../node_modules/react-native-webview"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -641,8 +631,6 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
   react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
-  react-native-vnpay-merchant: c9f1ebb375802c7004045e3646240f043acaaf61
-  react-native-webview: e994346d13f4d8b240347bc5be043a860452e4b6
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
   React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
   React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71
@@ -665,6 +653,6 @@ SPEC CHECKSUMS:
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 1b7b16492d91a4bb75d7a167904640eb35cf5e3c
+PODFILE CHECKSUM: 2aa97f909c94cc3768d9dc69401b7c62cac7d757
 
 COCOAPODS: 1.10.1

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "Invest",
       "version": "0.0.1",
       "dependencies": {
         "@react-native-community/async-storage": "^1.12.1",
@@ -32,9 +33,10 @@
         "react-native-reanimated": "^1.13.2",
         "react-native-safe-area-context": "^3.1.9",
         "react-native-screens": "^2.17.1",
+        "react-native-simple-radio-button": "^2.7.4",
         "react-native-tab-view": "^2.15.2",
         "react-native-vector-icons": "^8.0.0",
-        "react-native-vnpay-merchant": "/Users/macbookpro/Documents/Company/ReactNative/Invest/node_modules/react-native-vnpay-merchant",
+        "react-native-vnpay-merchant": "/Users/tungnh1999/Code/ReactNative/InvestCustomer/node_modules/react-native-vnpay-merchant",
         "react-redux": "^7.2.2",
         "redux": "^4.0.5",
         "redux-saga": "^1.1.3",
@@ -1571,7 +1573,6 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
-        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -4947,8 +4948,7 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "optionator": "^0.8.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -7457,7 +7457,6 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -8117,9 +8116,6 @@
       "resolved": "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -8177,9 +8173,6 @@
       "resolved": "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz",
       "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
       "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.1.9"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.9"
       }
@@ -9013,7 +9006,6 @@
         "@jest/types": "^24.9.0",
         "anymatch": "^2.0.0",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^1.2.7",
         "graceful-fs": "^4.1.15",
         "invariant": "^2.2.4",
         "jest-serializer": "^24.9.0",
@@ -9897,7 +9889,6 @@
         "@jest/types": "^24.9.0",
         "anymatch": "^2.0.0",
         "fb-watchman": "^2.0.0",
-        "fsevents": "^1.2.7",
         "graceful-fs": "^4.1.15",
         "invariant": "^2.2.4",
         "jest-serializer": "^24.9.0",
@@ -10013,9 +10004,6 @@
       "resolved": "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz",
       "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
       "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -11906,6 +11894,11 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-simple-radio-button": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.4.tgz",
+      "integrity": "sha512-QOZNmJUn0ViBGU+at7wAG/uGzd5PfXi0kMHr9lfTCLXknW/f9f2fOVjxjdHvOCdf/zA/eMJBjGjtusSDzQf1+w=="
+    },
     "node_modules/react-native-tab-view": {
       "version": "2.15.2",
       "resolved": "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz",
@@ -15970,7 +15963,6 @@
           "resolved": "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.59.0.tgz",
           "integrity": "sha512-1O3wrnMq4NcPQ1asEcl9lRDn/t+F1Oef6S9WaYVIKEhg9m/EQRGVrrTVP+R6B5Eeaj3+zNKbzM8Dx/NWy1hUbQ==",
           "requires": {
-            "@babel/core": "^7.0.0",
             "babel-preset-fbjs": "^3.3.0",
             "metro-babel-transformer": "0.59.0",
             "metro-react-native-babel-preset": "0.59.0",
@@ -22002,7 +21994,6 @@
       "integrity": "sha512-F5DdoPZiiIbuDRhxf+8drCm6GQCXQ1rKxDYfSdWvtl9wQaRHpUqh0/4p2XnzGFDH1gWVoVfjTb0v9T1eLRaL5A==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.0.0",
         "@babel/plugin-proposal-class-properties": "^7.0.0",
         "@babel/plugin-proposal-export-default-from": "^7.0.0",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
@@ -22049,7 +22040,6 @@
       "resolved": "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.58.0.tgz",
       "integrity": "sha512-3A73+cRq1eUPQ8g+hPNGgMUMCGmtQjwqHfoG1DwinAoJ/kr4WOXWWbGZo0xHJNBe/zdHGl0uHcDCp2knPglTdQ==",
       "requires": {
-        "@babel/core": "^7.0.0",
         "babel-preset-fbjs": "^3.3.0",
         "metro-babel-transformer": "0.58.0",
         "metro-react-native-babel-preset": "0.58.0",
@@ -23275,6 +23265,11 @@
       "integrity": "sha512-8+lCEsxzSu55GWRw6yZpyt3OszxN1OngfBsFXdqspaEfq6uIChanzlcD2PLVQl+iN82GAcrZM800Kd1pA477ZQ==",
       "requires": {}
     },
+    "react-native-simple-radio-button": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.4.tgz",
+      "integrity": "sha512-QOZNmJUn0ViBGU+at7wAG/uGzd5PfXi0kMHr9lfTCLXknW/f9f2fOVjxjdHvOCdf/zA/eMJBjGjtusSDzQf1+w=="
+    },
     "react-native-tab-view": {
       "version": "2.15.2",
       "resolved": "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.17.1",
+    "react-native-simple-radio-button": "^2.7.4",
     "react-native-tab-view": "^2.15.2",
     "react-native-vector-icons": "^8.0.0",
     "react-native-webview": "^11.2.5",

src/Screens/Action/History/HistoryView.js

 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, FlatList} from 'react-native';
+import HeaderSB from '../../../components/Header/HeaderSB';
+import Item from './Item';
+
+const data = [
+  {
+    id: '1',
+    money: 10000000,
+    content: 'Hoạt động: Nạp tiền',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '2',
+    money: 2000000,
+    content: 'Hoạt động: Nạp tiền',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '3',
+    day: '20',
+    money: 3000000,
+    content: 'Hoạt động: Nạp tiền',
+    status: 1,
+    date: '20/02/2021',
+  },
+  {
+    id: '4',
+    money: 4000000,
+    content: 'Hoạt động: Rút tiền',
+    status: 2,
+    date: '20/02/2021',
+  },
+  {
+    id: '5',
+    money: 9000000,
+    content: 'Hoạt động: Nạp tiền',
+    status: 1,
+    date: '20/02/2021',
+  },
+];
 
 const HistoryView = (props) => {
   return (
-    <View>
-      <Text>HistoryView screen</Text>
+    <View style={{flex: 1}}>
+      <HeaderSB title={'LỊCH SỬ'} />
+      <View style={{flex: 1}}>
+        <FlatList
+          keyExtractor={(item) => item.id}
+          data={data}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      </View>
     </View>
   );
 };

src/Screens/Action/History/Item.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+import {useNavigation} from '@react-navigation/native';
+import {DETAIL_REQUIRE_MONEY} from '../../../routers/ScreenNames';
+
+const Item = (props) => {
+  const {item} = props;
+  //   console.log('item---', item.status);
+  const navigate = useNavigation();
+  return (
+    <TouchableOpacity onPress={() => console.log('HEllo')}>
+      <View style={styles.container}>
+        <Block flex={1} row>
+          <View style={styles.wrapLeft} />
+          <View style={styles.wrapDate}>
+            {item.status == 1 ? (
+              <Image source={R.images.iconRecharge} style={styles.imgIcon} />
+            ) : (
+              <Image source={R.images.iconWithdrawal} style={styles.imgIcon} />
+            )}
+          </View>
+          <Block
+            style={{justifyContent: 'center'}}
+            padding={[5, 10]}
+            space={'between'}
+            flex={1}>
+            <View
+              style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}>
+              <View
+                style={{
+                  alignItems: 'flex-start',
+                }}>
+                <Text style={styles.txtBlack}>{item.content}</Text>
+                <Text style={styles.txt}>{item.date}</Text>
+              </View>
+
+              <View style={{alignItems: 'flex-end'}}>
+                {item.status == 1 ? (
+                  <Text
+                    style={{
+                      fontSize: getFontXD(42),
+                      fontWeight: 'bold',
+                      color: '#F99D1D',
+                    }}>
+                    {toPriceVnd(item.money)}
+                  </Text>
+                ) : (
+                  <Text
+                    style={{
+                      fontSize: getFontXD(42),
+                      fontWeight: 'bold',
+                      color: '#1473E6',
+                    }}>
+                    {toPriceVnd(item.money)}
+                  </Text>
+                )}
+                <Text style={styles.txt}>Hoàn tất</Text>
+              </View>
+            </View>
+          </Block>
+        </Block>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    height: HEIGHTXD(250),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginHorizontal: 10,
+    backgroundColor: R.colors.white,
+    marginTop: 10,
+    borderRadius: HEIGHTXD(30),
+  },
+  wrapRight: {
+    borderLeftColor: R.colors.borderGray,
+    borderLeftWidth: 0.7,
+  },
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txt: {
+    fontSize: getFontXD(36),
+    color: '#C4C4C4',
+  },
+  imgIcon: {
+    width: WIDTHXD(178),
+    height: HEIGHTXD(178),
+    resizeMode: 'contain',
+  },
+});

src/Screens/Feedback/FeedbackView.js

 import React, {useState} from 'react';
-import {View, Text} from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  TextInput,
+  Image,
+} from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
-import PickerItem from '../../components/Picker/PickerItem';
-const dataTest = [
-  {
-    value: '1',
-    name: '2020',
-  },
-  {
-    value: '2',
-    name: '2021',
-  },
-  {
-    value: '3',
-    name: '2022',
-  },
-  {
-    value: '4',
-    name: '2023',
-  },
-  {
-    value: '5',
-    name: '2023',
-  },
-  {
-    value: '3',
-    name: '2022',
-  },
-  {
-    value: '4',
-    name: '2023',
-  },
-  {
-    value: '5',
-    name: '2023',
-  },
+import RadioForm, {
+  RadioButton,
+  RadioButtonInput,
+  RadioButtonLabel,
+} from 'react-native-simple-radio-button';
+import PickerImg from '../../components/Picker/PickerImg';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
+
+const radio_props = [
+  {label: 'Rất kém', value: 0},
+  {label: 'Kém', value: 1},
+  {label: 'Bình thường', value: 2},
+  {label: 'Tốt', value: 3},
+  {label: 'Rất tốt', value: 4},
 ];
 
 const FeedbackView = (props) => {
-  const [year, setYear] = useState(dataTest[2]);
+  const [isSelected, setIsSelected] = useState('');
+  const [txtInput, setTxtInput] = useState('');
+  const [url, setUrl] = useState('');
+
+  const onPress = (value) => {
+    setIsSelected(value);
+    // console.log('hellooo');
+  };
+
+  const onClickImage = (path) => {
+    setUrl(path);
+    console.log('path--', path);
+  };
   return (
-    <View style={{flex: 1, paddingTop: 60}}>
-      <Text>FeedbackView screen</Text>
-
-      <PickerItem
-        width={100}
-        data={dataTest}
-        onValueChange={(value, items) => {
-          setYear(items);
-        }}
-      />
-    </View>
+    <KeyboardAvoidingView
+      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
+      style={{flex: 1}}
+      keyboardVerticalOffset={-50}>
+      <View style={{flex: 1}}>
+        <HeaderBack isWhite={true} title={'GỬI FEEDBACK'} />
+        <View style={styles.container}>
+          <Text style={styles.txt}>Đánh giá dịch vụ của DCV Invest</Text>
+
+          <RadioForm animation={true}>
+            {radio_props.map((obj, i) => (
+              <RadioButton labelHorizontal={true} key={i}>
+                <RadioButtonInput
+                  obj={obj}
+                  index={i}
+                  isSelected={isSelected === i}
+                  onPress={onPress}
+                  borderWidth={1}
+                  // buttonInnerColor={'#1473E6'}
+                  // buttonOuterColor={isSelected === i ? '#1473E6' : '#000'}
+                  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>
+
+          <View style={styles.footer}>
+            <TextInput
+              style={styles.txtInput}
+              multiline={true}
+              placeholder={'Hãy chia sẻ cảm nhận về dịch vụ nhé'}
+              onChangeText={(val) => setTxtInput(val)}
+            />
+            <View
+              style={{
+                borderWidth: 1,
+                borderStyle: 'dashed',
+                borderColor: '#CBCBCB',
+              }}
+            />
+            <View>
+              {url ? (
+                <Image
+                  style={{
+                    width: WIDTHXD(350),
+                    height: HEIGHTXD(250),
+                  }}
+                  source={{uri: url}}
+                />
+              ) : (
+                <PickerImg title="Tải ảnh lên" onClickImage={onClickImage} />
+              )}
+            </View>
+          </View>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
+  },
+  txt: {
+    color: '#929292',
+    paddingVertical: 16,
+    fontSize: 18,
+  },
+  footer: {
+    marginTop: 10,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: '#CBCBCB',
+    // height: 200,
+    marginHorizontal: 5,
+  },
+  txtInput: {
+    height: 110,
+    margin: 10,
+  },
+});
+
 export default FeedbackView;

src/Screens/Menu/Payments/Item.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} 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 (
+    <TouchableOpacity onPress={() => console.log('HEllo')}>
+      <View style={styles.container}>
+        <Block flex={1} row>
+          <View style={styles.wrapLeft} />
+          <Block padding={[5, 10]} space={'between'} flex={1}>
+            <View style={{justifyContent: 'center', flex: 1}}>
+              <Text style={styles.txt1}>
+                Tiền thưởng:{' '}
+                <Text style={styles.money}>{toPriceVnd(item.money)}</Text> vnđ
+              </Text>
+              <Text style={styles.txt2}>Nội dung: {item.content}</Text>
+            </View>
+            <Text style={styles.txt}>{item.time}</Text>
+          </Block>
+        </Block>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    height: HEIGHTXD(250),
+    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: '#C4C4C4',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txt1: {
+    fontSize: getFontXD(42),
+    color: '#0B2031',
+  },
+  txt2: {
+    fontSize: getFontXD(42),
+    color: '#0B2031',
+    marginVertical: 2,
+  },
+  imgIcon: {
+    width: WIDTHXD(178),
+    height: HEIGHTXD(178),
+    resizeMode: 'contain',
+  },
+  money: {
+    color: '#E3434F',
+  },
+});

src/Screens/Menu/Payments/Payments.js

 import React from 'react';
-import {View, Text} from 'react-native';
+import {View, FlatList} from 'react-native';
+import HeaderSearch from '../../../components/Header/HeaderBack';
+import Item from './Item';
+
+const data = [
+  {
+    id: '1',
+    time: '20/02/2021',
+    money: 5000000,
+    content: 'Mua kim loại ở sàn CBOT',
+  },
+  {
+    id: '2',
+    time: '20/02/2021',
+    money: 8000000,
+    content:
+      'Nhà đầu tư vẫn thu được lợi nhuận ngay cả khi thị trường đi xuống do có thể bán trước',
+  },
+];
 
 const Payments = (props) => {
   return (
     <View>
-      <Text>Payments screen</Text>
+      <HeaderSearch isWhite={false} title={'Các khoản thanh toán'} />
+
+      <FlatList
+        keyExtractor={(item) => item.id}
+        data={data}
+        renderItem={({item}) => <Item item={item} />}
+      />
     </View>
   );
 };

src/Screens/Menu/Rose/Item.js

@@ -29,7 +29,6 @@ const Item = (props) => {
                 style={{
                   flex: 1,
                   height: HEIGHTXD(200),
-
                   paddingRight: 10,
                 }}>
                 <View style={{flex: 1}}>

src/Screens/Payment/Payment.js

@@ -12,43 +12,45 @@ import {
 
 import create_payment_link from './setup';
 
-import VnpayMerchant, {VnpayMerchantModule} from 'react-native-vnpay-merchant';
-const eventEmitter = new NativeEventEmitter(VnpayMerchantModule);
+// import VnpayMerchant, {VnpayMerchantModule} from 'react-native-vnpay-merchant';
+// const eventEmitter = new NativeEventEmitter(VnpayMerchantModule);
 
 const Payment = (props) => {
   const [text, setText] = useState('OpenSDK');
 
-  useEffect(() => {
-    // mở sdk
-    eventEmitter.addListener('PaymentBack', (e) => {
-      console.log('Sdk back!');
+  // console.log('Link create payment');
 
-      // Đã available trên cả ios, android
-      if (e) {
-        switch (e.resultCode) {
-          case 0:
-            console.log('Sdk closed');
-            break;
-          case -1:
-            console.log('Người dùng nhấn back từ sdk để quay lại');
-            break;
-          case 10: //ios
-            console.log(
-              'Người dùng nhấn chọn thanh toán qua app thanh toán (Mobile Banking, Ví...)',
-            );
-            break;
-          case 99:
-            console.log(
-              'Người dùng nhấn back từ trang thanh toán thành công khi thanh toán qua thẻ khi gọi đến http://sdk.merchantbackapp',
-            );
-        }
-      }
-    });
-    return () => {
-      // khi tắt sdk
-      eventEmitter.removeAllListeners('PaymentBack');
-    };
-  }, []);
+  // useEffect(() => {
+  //   // mở sdk
+  //   eventEmitter.addListener('PaymentBack', (e) => {
+  //     console.log('Sdk back!');
+
+  //     // Đã available trên cả ios, android
+  //     if (e) {
+  //       switch (e.resultCode) {
+  //         case 0:
+  //           console.log('Sdk closed');
+  //           break;
+  //         case -1:
+  //           console.log('Người dùng nhấn back từ sdk để quay lại');
+  //           break;
+  //         case 10: //ios
+  //           console.log(
+  //             'Người dùng nhấn chọn thanh toán qua app thanh toán (Mobile Banking, Ví...)',
+  //           );
+  //           break;
+  //         case 99:
+  //           console.log(
+  //             'Người dùng nhấn back từ trang thanh toán thành công khi thanh toán qua thẻ khi gọi đến http://sdk.merchantbackapp',
+  //           );
+  //       }
+  //     }
+  //   });
+  //   return () => {
+  //     // khi tắt sdk
+  //     eventEmitter.removeAllListeners('PaymentBack');
+  //   };
+  // }, []);
 
   return (
     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

src/assets/images.js

@@ -29,6 +29,8 @@ const images = {
   iconMethodPay: require('./images/iconMethodPay.png'),
 
   iconDepositNoti: require('./images/iconDeposit.png'),
+  iconRecharge: require('./images/iconRecharge.png'),
+  iconWithdrawal: require('./images/iconWithdrawal.png'),
   iconBack: require('./images/iconBack.png'),
   bgBtn: require('./images/bgBtn.png'),
   addImg: require('./images/addImg.png'),

src/components/Picker/PickerImg.js

@@ -23,7 +23,7 @@ const options = {
 };
 
 const PickerImg = (props) => {
-  const {title} = props;
+  const {title, height, width, onClickImage} = props;
 
   const [imgPicker, setImgPicker] = useState();
   const [isModalVisible, setModalVisible] = useState(false);
@@ -37,6 +37,7 @@ const PickerImg = (props) => {
     }).then((images) => {
       setModalVisible(false);
       console.log(images);
+      onClickImage(images[0].path);
     });
   };
 
@@ -48,6 +49,7 @@ const PickerImg = (props) => {
     }).then((image) => {
       setModalVisible(false);
       console.log(image);
+      onClickImage(image[0].path);
     });
   };
 
@@ -117,6 +119,7 @@ const styles = StyleSheet.create({
     fontSize: getFontXD(42),
     color: R.colors.color777,
     marginBottom: 5,
+    paddingLeft: 10,
   },
   selectionImg: {
     padding: 10,