Done Payments.js

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/Podfile.lock

@@ -325,8 +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-RCTActionSheet (0.62.2):
     - React-Core/RCTActionSheetHeaders (= 0.62.2)
   - React-RCTAnimation (0.62.2):
@@ -462,7 +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-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`)
@@ -550,8 +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-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -636,7 +631,6 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
   react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
-  react-native-vnpay-merchant: c9f1ebb375802c7004045e3646240f043acaaf61
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
   React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
   React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71

package.json

@@ -38,7 +38,6 @@
     "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/tungnh1999/Code/ReactNative/InvestCustomer/node_modules/react-native-vnpay-merchant",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",

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/Payment/Payment.js

@@ -18,39 +18,39 @@ import create_payment_link from './setup';
 const Payment = (props) => {
   const [text, setText] = useState('OpenSDK');
 
-  console.log('Link create payment');
+  // console.log('Link create payment');
 
-  useEffect(() => {
-    // mở sdk
-    eventEmitter.addListener('PaymentBack', (e) => {
-      console.log('Sdk back!');
+  // 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');
-    };
-  }, []);
+  //     // Đã 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/routers/StackNavigation.js

@@ -14,7 +14,7 @@ import Setting from '../Screens/Setting/Setting';
 
 import BonusTeam from '../Screens/Menu/BonusTeam/BonusTeam';
 import MyGroup from '../Screens/Menu/MyGroup/MyGroup';
-// import Payments from '../Screens/Menu/Payments/Payments';
+import Payments from '../Screens/Menu/Payments/Payments';
 import Rose from '../Screens/Menu/Rose/Rose';
 import Profile from '../Screens/Menu/Profile/Profile';
 
@@ -60,7 +60,7 @@ function MyStack(props) {
       <Stack.Screen name={ScreenName.CHOOSEMETHOD} component={ChooseMethod} />
       <Stack.Screen name={ScreenName.BONUSTEAM} component={BonusTeam} />
       <Stack.Screen name={ScreenName.MYGROUP} component={MyGroup} />
-      {/* <Stack.Screen name={ScreenName.PAYMENTS} component={Payments} /> */}
+      <Stack.Screen name={ScreenName.PAYMENTS} component={Payments} />
       <Stack.Screen name={ScreenName.ROSE} component={Rose} />
       <Stack.Screen name={ScreenName.SETTING} component={Setting} />