fix bug post image

package.json

@@ -21,6 +21,7 @@
     "@react-navigation/material-top-tabs": "^5.3.14",
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.2",
+    "async": "^3.2.0",
     "axios": "^0.21.1",
     "dateformat": "^4.5.1",
     "lodash": "^4.17.20",
@@ -42,8 +43,8 @@
     "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-ratings": "^8.0.4",
     "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.17.1",

src/Screens/AccountVerification/Tab/Profile.js

@@ -29,6 +29,7 @@ import PickerDate from '../../../components/Picker/PickerDate';
 import PickerItem from '../../../components/Picker/PickerItem';
 import {saveUserToRedux} from '../../../actions/users';
 import I18n from '../../../helper/i18/i18n';
+import {uploadImage} from '../../../apis/Functions/Upload';
 
 const {width} = Dimensions.get('window');
 
@@ -54,41 +55,23 @@ const Profile = (props) => {
 
   const [type, setType] = useState();
 
-  const createFormData = (identity_after, identity_before, sign_img, body) => {
+  const createFormData = (photo, body) => {
     const data = new FormData();
-
-    data.append('identity_after', {
-      name: 'identity_after.jpg',
-      type: 'image/jpg',
-      uri:
-        Platform.OS === 'android'
-          ? identity_after
-          : identity_after.replace('file://', ''),
-    });
-
-    data.append('identity_before', {
-      name: 'identity_before.jpg',
-      type: 'image/jpg',
-      uri:
-        Platform.OS === 'android'
-          ? identity_before
-          : identity_before.replace('file://', ''),
-    });
-
-    data.append('sign_image', {
+    data.append('image_file', {
       name: 'sign_img.jpg',
       type: 'image/jpg',
-      uri:
-        Platform.OS === 'android' ? sign_img : sign_img.replace('file://', ''),
+      uri: Platform.OS === 'android' ? photo : photo.replace('file://', ''),
     });
-
     Object.keys(body).forEach((key) => {
       data.append(key, body[key]);
     });
+    console.log('Data', data);
     return data;
   };
 
   const onPress = async () => {
+    props.showLoading();
+    var async = require('async');
     const titles = [
       I18n.t('CardType').toLowerCase(),
       I18n.t('IdentityCardFrontPhoto'),
@@ -97,33 +80,91 @@ const Profile = (props) => {
     ];
     const index = checkFormatArray([type, urlBack, urlFont, urlSign]);
     if (index === true) {
-      const data = createFormData(urlBack, urlFont, urlSign, {
+      async.parallel(
+        [
+          async function (callback) {
+            const res = await uploadImage(
+              createFormData(urlFont, {
+                scope: 'VERIFY_USER',
+                field_name: 'identity_before',
+                platform: Platform.OS,
+              }),
+            );
+            callback(null, res);
+          },
+          async function (callback) {
+            const res = await uploadImage(
+              createFormData(urlBack, {
+                scope: 'VERIFY_USER',
+                field_name: 'identity_before',
+                platform: Platform.OS,
+              }),
+            );
+
+            callback(null, res);
+          },
+          async function (callback) {
+            const res = await uploadImage(
+              createFormData(urlSign, {
+                scope: 'VERIFY_USER',
+                field_name: 'sign_img',
+                platform: Platform.OS,
+              }),
+            );
+
+            callback(null, res);
+          },
+        ],
+        async function (err, results) {
+          if (
+            results[0].status == 200 &&
+            results[1].status == 200 &&
+            results[2].status == 200
+          ) {
+            if (
+              results[0].data.data.path &&
+              results[1].data.data.path &&
+              results[2].data.data.path
+            ) {
+              const data = {
                 card_type: type.value,
                 uid: props.user.uid,
                 ...props.route.params,
-      });
-      props.showLoading();
+                mode: 'TEST',
+                identity_before_path: results[0].data.data.path,
+                identity_after_path: results[1].data.data.path,
+                sign_image_path: results[2].data.data.path,
+              };
               const res = await verifyAccountApi(data);
               props.hideLoading();
-      console.log(res);
               if (res?.status == 200 && res.data) {
-        if(res.data.code == 200) {
+                if (res.data.code == 200) {
                   setTimeout(() => {
                     props.saveUserToRedux(res.data.data);
                     Alert.alert(I18n.t('Notification'), res.data.message);
                     props.navigation.popToTop();
                   }, 500);
                 } else {
+                  props.hideLoading();
                   setTimeout(() => {
                     Alert.alert(I18n.t('Notification'), res.data.message);
                   }, 500);
                 }
               } else {
+                props.hideLoading();
                 setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), 'upload fail');
+                  Alert.alert(
+                    I18n.t('Notification'),
+                    I18n.t('UploadImageFail'),
+                  );
                 }, 500);
               }
+            }
+          }
+        },
+      );
     } else {
+      props.hideLoading();
       Alert.alert(
         I18n.t('Notification'),
         I18n.t('Please_fill_in') + titles[index],

src/Screens/Action/Wallet/OTPWallet.js

+import React, {Component, useEffect, useState} from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  Alert,
+} from 'react-native';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import {walletDeposit} from '../../../apis/Functions/Deposit';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../Config/Functions';
+import R from '.././../../assets/R';
+import {verifyOTPApi, registorApi} from '../../../apis/Functions/users';
+import {useNavigation} from '@react-navigation/native';
+import I18n from '../../../helper/i18/i18n';
+import AppText from '../../../components/AppText';
+
+import {showLoading, hideLoading} from '../../../actions/loadingAction';
+import {connect} from 'react-redux';
+import {TABNAVIGATOR} from '../../../routers/ScreenNames';
+
+const CELL_COUNT = 4;
+
+const ConfirmOTP = (propsa) => {
+  const [value, setValue] = useState('');
+
+  const navigate = useNavigation();
+
+  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  const confirm = async () => {
+    if (!value) {
+      Alert.alert(I18n.t('Notification'), I18n.t('EnterOTPRequest'));
+    } else if (value.length != 4) {
+      Alert.alert(I18n.t('Notification'), I18n.t('OTPInvalid'));
+    } else {
+      propsa.showLoading();
+      const res = await verifyOTPApi({
+        platform: Platform.OS,
+        receiver_name: propsa.user.email,
+        otp: value,
+      });
+
+      if (res.data.code == 200) {
+        const {amount, notes, type} = propsa.route.params;
+        const res = await walletDeposit({
+          amount,
+          platform: Platform.OS,
+          notes,
+          fee: 0,
+        });
+        propsa.hideLoading();
+        if (res.data.code == 200) {
+          setTimeout(() => {
+            Alert.alert(I18n.t('Notification'), res.data.message);
+            navigate.navigate(TABNAVIGATOR);
+          }, 500);
+        } else {
+          setTimeout(() => {
+            Alert.alert(I18n.t('Notification'), res.data.message);
+          }, 500);
+        }
+      } else {
+        setTimeout(() => {
+          Alert.alert(I18n.t('Notification'), res.data.message);
+        }, 500);
+      }
+
+      propsa.hideLoading();
+    }
+  };
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack title={'VerifyOTP'} />
+      <View style={styles.container}>
+        <View style={{height: 20}} />
+        <View style={styles.wrap}>
+          <AppText i18nKey={'Verify_code'} style={styles.txtTitle} />
+          <View style={styles.containerCode}>
+            <CodeField
+              ref={ref}
+              {...props}
+              value={value}
+              onChangeText={setValue}
+              cellCount={CELL_COUNT}
+              rootStyle={styles.codeFieldRoot}
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              renderCell={({index, symbol, isFocused}) => (
+                <View
+                  onLayout={getCellOnLayoutHandler(index)}
+                  key={index}
+                  style={[styles.cellRoot, isFocused && styles.focusCell]}>
+                  <Text style={styles.cellText}>
+                    {symbol || (isFocused ? <Cursor /> : null)}
+                  </Text>
+                </View>
+              )}
+            />
+          </View>
+        </View>
+      </View>
+      <View style={styles.footer}>
+        <TouchableOpacity onPress={confirm} style={styles.btn}>
+          <AppText i18nKey={'Continue'} style={styles.txtBtn} />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.wrapFooter}
+          onPress={() => navigate.goBack()}>
+          <Text style={styles.txtNote}>{I18n.t('OTPValidFiveMinute')}</Text>
+          <AppText i18nKey={'Re_send'} style={styles.txtSend} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    paddingVertical: 20,
+  },
+  footer: {
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrap: {
+    flex: 1,
+    paddingTop: 30,
+    alignItems: 'center',
+    width: '100%',
+    paddingHorizontal: 50,
+  },
+  containerCode: {
+    height: 50,
+
+    width: '100%',
+    marginTop: 30,
+  },
+  codeFieldRoot: {
+    marginTop: 20,
+  },
+
+  focusCell: {
+    borderColor: '#000',
+  },
+  cellRoot: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomColor: '#ccc',
+    borderBottomWidth: 1,
+  },
+  cellText: {
+    color: '#000',
+    fontSize: 36,
+    textAlign: 'center',
+  },
+  focusCell: {
+    borderBottomColor: '#007AFF',
+    borderBottomWidth: 2,
+  },
+  txtTitle: {
+    fontSize: getFontXD(52),
+    color: '#979797',
+  },
+  btn: {
+    width: WIDTHXD(521),
+    height: HEIGHTXD(120),
+    borderRadius: 15,
+    backgroundColor: '#1C6AF6',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txtBtn: {
+    color: R.colors.white,
+    fontSize: getFontXD(52),
+    textTransform: 'uppercase',
+  },
+  txtSend: {
+    fontSize: getFontXD(42),
+    color: '#1C6AF6',
+  },
+  wrapFooter: {
+    marginTop: 30,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  txtNote: {
+    color: '#A2A2A2',
+    fontSize: getFontXD(42),
+    fontStyle: 'italic',
+  },
+});
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+
+export default connect(mapStateToProps, {showLoading, hideLoading})(ConfirmOTP);

src/Screens/Action/Wallet/WalletDeposit.js

@@ -28,6 +28,9 @@ import {showLoading, hideLoading} from '../../../actions/loadingAction';
 import {walletDeposit} from '../../../apis/Functions/Deposit';
 import TextMoney from '../../../components/Input/InputMoney';
 import I18n from '../../../helper/i18/i18n';
+import {OTPWALLET} from '../../../routers/ScreenNames';
+
+import {getOTPApi} from '../../../apis/Functions/users';
 
 const {width} = Dimensions.get('window');
 
@@ -45,19 +48,13 @@ const WalletDeposit = (props) => {
     const index = checkFormatArray([amount, notes]);
     if (index === true) {
       props.showLoading();
-      const res = await walletDeposit({
-        amount,
+      const res = await getOTPApi({
         platform: Platform.OS,
-        notes,
-        fee: 0,
+        otp_by: props.user.email,
       });
       props.hideLoading();
-
       if (res.data.code == 200) {
-        setTimeout(() => {
-          Alert.alert(I18n.t('Notification'), res.data.message);
-          navigate.goBack();
-        }, 500);
+        navigate.navigate(OTPWALLET, {type: 'DEPOSIT', amount, notes});
       } else {
         setTimeout(() => {
           Alert.alert(I18n.t('Notification'), res.data.message);

src/apis/Functions/Upload.js

+import {PostLogin, GetData, PostFormData} from '../helpers';
+import url from '../url';
+
+export const uploadImage = async (body) =>
+  PostFormData(url.urlUploadImage, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/Functions/users.js

@@ -33,7 +33,7 @@ export const forgotPasswordApi = async (body) =>
     .catch((err) => err);
 
 export const verifyAccountApi = async (body) =>
-  PostFormData(url.urlVerifyAccount, body)
+  PostData(url.urlVerifyAccount, body)
     .then((res) => res)
     .catch((err) => err);
 

src/apis/helpers.js

@@ -93,7 +93,7 @@ export async function PostFormData(url, data) {
   const timeout = setTimeout(() => {
     source.cancel();
     // Timeout Logic
-    }, 1000);
+  }, 60000);
   console.log(token);
   let myRequest = {
     method: 'post',
@@ -103,7 +103,7 @@ export async function PostFormData(url, data) {
       'Content-Type': 'multipart/form-data',
       Authorization: 'Bearer ' + token,
     },
-        timeout: 1000,
+    timeout: 60000,
     data: data,
     cancelToken: source.token,
   };

src/apis/url.js

@@ -48,4 +48,6 @@ export default {
   urlGetContractDescription: `${root}api/v1/transactions/products/specification-contract/`,
 
   urlChangeAvatar: root + 'api/v1/customers/update-avatar',
+
+  urlUploadImage: root + 'api/v1/uploads/upload-image',
 };

src/helper/i18/locales/en.js

@@ -229,4 +229,6 @@ export default {
   FeedBackDCV: 'Feedback for DCV Invest',
   ReVerify: 'Re-Verify',
   RejectVerify: 'Reject verify',
+  UploadImageFail:
+    'The network connection is not stable, please check the connection',
 };

src/helper/i18/locales/vn.js

@@ -231,4 +231,6 @@ export default {
   FeedBackDCV: 'Đánh giá dịch vụ của DCV Invest',
   ReVerify: 'Xác minh lại',
   RejectVerify: 'Từ chối xác minh',
+  UploadImageFail:
+    'Đường truyền mạng không ổn định.Xin kiểm tra lại đường truyền!',
 };

src/routers/ScreenNames.js

@@ -67,3 +67,5 @@ export const LEGALPARTNER = 'LEGALPARTNER';
 export const HISTORYDETAIL = 'HISTORYDETAIL';
 export const PRODUCTDETAIL = 'PRODUCTDETAIL';
 export const REGISTEROTP = 'REGISTEROTP';
+
+export const OTPWALLET = 'OTPWALLET';

src/routers/StackNavigation.js

@@ -47,6 +47,7 @@ import SnackBar from '../components/SnackBar';
 import DetailHistory from '../Screens/Action/History/DetailHistory';
 import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail';
 import RegisterOTP from '../Screens/Authen/RegisterOTP';
+import OTPWallet from '../Screens/Action/Wallet/OTPWallet';
 
 import * as ScreenName from './ScreenNames';
 
@@ -65,6 +66,7 @@ function MyStack(props) {
       headerMode={'none'}
       initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
+      <Stack.Screen name={ScreenName.OTPWALLET} component={OTPWallet} />
       <Stack.Screen name={ScreenName.HISTORYDETAIL} component={DetailHistory} />
       <Stack.Screen name={ScreenName.LEGALDOCUMENT} component={LegaDocument} />
       <Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />

yarn.lock

@@ -2145,6 +2145,11 @@ async@^2.4.0:
   dependencies:
     lodash "^4.17.14"
 
+async@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz"