react-native-timacare 2.0.11 → 2.0.13

package/src/navigation/primary-navigator.tsx

@@ -50,6 +50,7 @@ import { DigitalLending } from '../screens/digital-lending';
 import { DetailLoanTima } from '../screens/detail-loan/DetailLoanTima';
 import MRZScanner from '../screens/mrz-scanner';
 import { LivenessV2 } from '../screens/liveness-v2';
+import PreviewContract from '../screens/eSign/PreviewContract';
 
 export const ScreenNames = {
   Splash: 'Splash',
@@ -100,6 +101,7 @@ export const ScreenNames = {
   DetailLoanTima: 'DetailLoanTima',
   MRZScanner: 'MRZScanner',
   LivenessV2: 'LivenessV2',
+  PreviewContract: 'PreviewContract',
 };
 
 const Stack = createNativeStackNavigator();
@@ -189,6 +191,10 @@ export function PrimaryNavigator() {
       />
       <Stack.Screen name={ScreenNames.MRZScanner} component={MRZScanner} />
       <Stack.Screen name={ScreenNames.LivenessV2} component={LivenessV2} />
+      <Stack.Screen
+        name={ScreenNames.PreviewContract}
+        component={PreviewContract}
+      />
     </Stack.Navigator>
   );
 }

package/src/screens/eSign/PreviewContract.tsx

@@ -0,0 +1,76 @@
+//@ts-nocheck
+import React from 'react';
+import { SafeAreaView, View } from 'react-native';
+import { MText } from '../../components/MText';
+import { color } from '../../theme';
+import { IconBack } from '../../assets/icons';
+import { commonStyles } from '../CommonStyles';
+import MButton from '../../components/MButton';
+import { useNavigation } from '@react-navigation/native';
+import Pdf from 'react-native-pdf';
+
+export default function PreviewContract(props: any) {
+  const navigation = useNavigation();
+  const source = props?.route?.params;
+  return (
+    <View style={{ flex: 1, backgroundColor: 'white' }}>
+      <SafeAreaView style={{ flex: 1 }}>
+        <View
+          style={[
+            commonStyles.row,
+            commonStyles.alignCenter,
+            { paddingHorizontal: 16, height: 55 },
+          ]}
+        >
+          <MButton
+            //@ts-ignore
+            onPress={() => {
+              navigation.goBack();
+            }}
+            style={{
+              width: 30,
+              height: 55,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <IconBack width={18} height={18} fill={'black'} />
+          </MButton>
+
+          <MText
+            style={{
+              marginRight: 30,
+              fontSize: 16,
+              paddingHorizontal: 4,
+              color: color.headerColor,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              flex: 1,
+            }}
+          ></MText>
+        </View>
+        <View style={{ backgroundColor: color.border }} />
+        <View style={{ flex: 1 }}>
+          <Pdf
+            source={source}
+            onLoadComplete={(numberOfPages, filePath) => {
+              console.log(`Number of pages: ${numberOfPages}`);
+            }}
+            onPageChanged={(page, numberOfPages) => {
+              console.log(`Current page: ${page}`);
+            }}
+            onError={(error) => {
+              console.log(error);
+            }}
+            onPressLink={(uri) => {
+              console.log(`Link pressed: ${uri}`);
+            }}
+            style={{
+              flex: 1,
+            }}
+          />
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+}

package/src/screens/eSign/Store.tsx

@@ -11,7 +11,7 @@ class Store {
   @observable reSendOTPLoading = false;
 
   @observable countDown;
-  @observable currentTime = 300;
+  @observable currentTime = 10;
 
   @observable linkPreview = '';
   @observable linkContract = '';
@@ -125,6 +125,27 @@ class Store {
       ]);
     }
   }
+
+  @action
+  async getPreviewContract(id, onSuccess, onError) {
+    try {
+      const response = await Api.getInstance().previewContract(id);
+      if (response.kind === 'ok') {
+        if (response.data.meta.errorCode === 200) {
+          if (onSuccess) onSuccess(response.data.data);
+        } else {
+          Alert.alert('Thông báo', response.data.meta.errorMessage);
+          if (onError) onError();
+        }
+      } else {
+        Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+        if (onError) onError();
+      }
+    } catch (error) {
+      Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
+      if (onError) onError();
+    }
+  }
 }
 const eSignStore = new Store();
 export default eSignStore;

package/src/screens/eSign/index.tsx

@@ -10,10 +10,12 @@ import {
   ActivityIndicator,
   Platform,
   Alert,
+  TouchableOpacity,
 } from 'react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
-import { observer } from 'mobx-react-lite';
+import { observer, Observer } from 'mobx-react-lite';
 import WebView from 'react-native-webview';
+import LinearGradient from 'react-native-linear-gradient';
 import { commonStyles } from '../CommonStyles';
 import MButton from '../../components/MButton';
 import { MText, MTextInput } from '../../components/MText';
@@ -28,27 +30,36 @@ import { ScreenNames } from '../../navigation';
 import Slack from 'react-native-slack-webhook';
 import homeStore from '../home/Store';
 import appStore from '../../AppStore';
+import Pdf from 'react-native-pdf';
+import Modal from 'react-native-modal';
+import KeyboardSpacer from '../../components/keyboardspace';
+import Loading from '../../components/Loading';
+
 const webHookURL =
   'https://hooks.slack.com/services/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';
 
 export const ESign = observer(function ESign(props: any) {
   const navigation = useNavigation();
   const loan = props.route.params?.loan;
-  const [visible, setIsVisible] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [contract, setContract] = useState<any>();
+  const [showModal, setShowModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentTime, setCurrentTime] = useState(300);
+  const timerRef = React.useRef(currentTime);
 
   const countDown = () => {
-    eSignStore.currentTime = 300;
-    try {
-      clearInterval(eSignStore.countDown);
-    } catch (e) {}
-    eSignStore.countDown = setInterval(() => {
-      if (eSignStore.currentTime > 0) {
-        eSignStore.currentTime = eSignStore.currentTime - 1;
-        myLog(eSignStore.currentTime);
+    const timerId = setInterval(() => {
+      timerRef.current -= 1;
+      if (timerRef.current < 0) {
+        clearInterval(timerId);
       } else {
-        clearInterval(eSignStore.countDown);
+        setCurrentTime(timerRef.current);
       }
     }, 1000);
+    return () => {
+      clearInterval(timerId);
+    };
   };
 
   const verify = (OTP) => {
@@ -68,38 +79,48 @@ export const ESign = observer(function ESign(props: any) {
               '#timacare'
             );
           } catch (e) {}
-          navigation.dispatch(
-            CommonActions.reset({
-              index: 1,
-              routes: [
-                {
-                  name: ScreenNames.Contract,
-                  params: { uri: 'http://' + eSignStore.linkContract },
+          setShowModal(false);
+          setTimeout(() => {
+            Alert.alert('Thông báo', 'Ký hợp đồng thành công', [
+              {
+                text: 'Đồng ý',
+                onPress: () => {
+                  navigation.dispatch(
+                    CommonActions.reset({
+                      index: 1,
+                      routes: [
+                        {
+                          name: ScreenNames.Main,
+                        },
+                      ],
+                    })
+                  );
                 },
-              ],
-            })
-          );
+              },
+            ]);
+          }, 300);
         }
       );
     }
   };
 
-  useEffect(() => {
+  const signContract = () => {
+    setIsLoading(true);
     eSignStore.signContractForBorrower(
       {
         loanBriefId: loan.id,
       },
       () => {
+        setIsLoading(false);
+        setShowModal(true);
         countDown();
       },
       () => {
         navigation.goBack();
+        setIsLoading(false);
       }
     );
-    return () => {
-      clearInterval(eSignStore.countDown);
-    };
-  }, []);
+  };
 
   const back = () => {
     navigation.goBack();
@@ -111,11 +132,26 @@ export const ESign = observer(function ESign(props: any) {
         customerId: loan.id,
       },
       () => {
+        setCurrentTime(300);
+        timerRef.current = 300;
         countDown();
       }
     );
   };
 
+  useEffect(() => {
+    eSignStore.getPreviewContract(
+      loan?.id,
+      (res) => {
+        setContract(res);
+        setLoading(false);
+      },
+      () => {
+        setLoading(false);
+      }
+    );
+  }, []);
+
   return (
     <View style={{ flex: 1, backgroundColor: 'white' }}>
       <SafeAreaView style={{ flex: 1 }}>
@@ -153,180 +189,244 @@ export const ESign = observer(function ESign(props: any) {
                 flex: 1,
               }}
             >
-              {'eSign'}
+              Ký hợp đồng
             </MText>
           </View>
           <View style={{ backgroundColor: color.border }} />
-          <ScrollView
-            keyboardShouldPersistTaps={'always'}
-            style={commonStyles.fill}
-          >
-            <View
+
+          <View style={{ flex: 1 }}>
+            <Pdf
+              source={{
+                uri:
+                  'data:application/pdf;base64,' +
+                  contract?.base64_hopdongdichvu,
+              }}
+              onLoadComplete={(numberOfPages, filePath) => {
+                console.log(`Number of pages: ${numberOfPages}`);
+              }}
+              onPageChanged={(page, numberOfPages) => {
+                console.log(`Current page: ${page}`);
+              }}
+              onError={(error) => {
+                console.log(error);
+              }}
+              onPressLink={(uri) => {
+                console.log(`Link pressed: ${uri}`);
+              }}
               style={{
-                shadowColor: '#aaaaaa59',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 1,
-                shadowRadius: 5,
-                backgroundColor: 'white',
-                elevation: 2,
-                margin: 16,
-                padding: 24,
-                borderRadius: 4,
-                borderWidth: 1,
-                borderColor: color.border,
-                alignItems: 'center',
+                flex: 1,
               }}
-            >
-              <Formik
-                initialValues={{
-                  otp: __DEV__ ? '' : '',
+            />
+          </View>
+          <View style={{ paddingHorizontal: 24 }}>
+            {contract?.base64_giaoket_1 && (
+              <TouchableOpacity
+                style={{ marginTop: 10 }}
+                onPress={() => {
+                  navigation.push(ScreenNames.PreviewContract, {
+                    uri:
+                      'data:application/pdf;base64,' +
+                      contract?.base64_giaoket_1,
+                  });
                 }}
-                onSubmit={(values) => {}}
-                validationSchema={yup.object().shape({
-                  otp: yup.string().required('Yêu cầu mã OTP.'),
-                })}
               >
-                {({
-                  values,
-                  handleChange,
-                  errors,
-                  setFieldTouched,
-                  setFieldValue,
-                  touched,
-                  isValid,
-                  handleSubmit,
-                }) => (
-                  <View style={{}}>
-                    {eSignStore.isLoading ? (
-                      <View
-                        style={[
-                          commonStyles.alignCenter,
-                          commonStyles.justifyCenter,
-                          { paddingVertical: 16 },
-                        ]}
-                      >
-                        <ActivityIndicator
-                          size={'large'}
-                          color={color.primary}
-                        />
-                        <MText>Đang xác thực số điện thoại của bạn</MText>
-                      </View>
-                    ) : (
-                      <View style={{ width: '80%' }}>
-                        <MText
-                          style={{
-                            fontSize: 12,
-                            color: color.textHeader,
-                            marginBottom: 10,
-                          }}
-                        >{`Nhập mã OTP`}</MText>
-                        <View
-                          style={[commonStyles.row, commonStyles.alignCenter]}
-                        >
-                          <MTextInput
-                            placeholderTextColor={'#939598'}
-                            placeholder={'••••••'}
-                            style={[
-                              commonStyles.textNormal,
-                              commonStyles.fill,
-                              {
-                                textAlign: 'center',
-                                fontSize: 16,
-                                borderRadius: 4,
-                                borderWidth: 1,
-                                borderColor: color.border,
-                                paddingVertical:
-                                  Platform.OS === 'android' ? 8 : 14,
-                                paddingHorizontal: 16,
-                              },
-                            ]}
-                            onChangeText={(text) => {
-                              setFieldValue('otp', text);
-                              if (
-                                text.length === 6 &&
-                                eSignStore.currentTime !== 0
-                              ) {
-                                verify(text);
-                              }
-                            }}
-                            maxLength={6}
-                            onBlur={() => setFieldTouched('otp')}
-                            returnKeyType={'done'}
-                            value={values.otp}
-                            autoFocus={true}
-                            textContentType={'oneTimeCode'}
-                            keyboardType={'numeric'}
-                          />
-                        </View>
-                        <MText
-                          style={{
-                            fontSize: 12,
-                            color: '#AAAAAA',
-                            marginTop: 8,
-                            fontStyle: 'italic',
-                          }}
-                        >{`Tin nhắn SMS sẽ được gửi tới số điện thoại của bạn có hạn là 5 phút`}</MText>
-                      </View>
-                    )}
-                  </View>
-                )}
-              </Formik>
-              {eSignStore.currentTime === 0 ? (
-                <MButton
-                  onPress={reSendOTP}
-                  style={[
-                    commonStyles.alignCenter,
-                    commonStyles.justifyCenter,
-                    {
-                      marginTop: 12,
-                      backgroundColor: color.primary,
-                      height: 50,
-                      borderRadius: 4,
-                      paddingHorizontal: 20,
-                      marginLeft: 16,
-                    },
-                  ]}
+                <MText
+                  style={{ color: 'blue', textDecorationLine: 'underline' }}
                 >
-                  {eSignStore.reSendOTPLoading ? (
-                    <ActivityIndicator color={'white'} size={'small'} />
-                  ) : (
-                    <MText
-                      style={[commonStyles.textNormalBold, { color: 'white' }]}
-                    >
-                      Lấy OTP
-                    </MText>
-                  )}
-                </MButton>
-              ) : (
+                  Đề nghị giao kết thoả thuận cho vay 1
+                </MText>
+              </TouchableOpacity>
+            )}
+            {contract?.base64_giaoket_2 && (
+              <TouchableOpacity
+                style={{ marginTop: 10 }}
+                onPress={() => {
+                  navigation.push(ScreenNames.PreviewContract, {
+                    uri:
+                      'data:application/pdf;base64,' +
+                      contract?.base64_giaoket_2,
+                  });
+                }}
+              >
+                <MText
+                  style={{ color: 'blue', textDecorationLine: 'underline' }}
+                >
+                  Đề nghị giao kết thoả thuận cho vay 2
+                </MText>
+              </TouchableOpacity>
+            )}
+            {contract?.base64_phulucsuadoithoathuanchovay && (
+              <TouchableOpacity
+                style={{ marginTop: 10 }}
+                onPress={() => {
+                  navigation.push(ScreenNames.PreviewContract, {
+                    uri:
+                      'data:application/pdf;base64,' +
+                      contract?.base64_phulucsuadoithoathuanchovay,
+                  });
+                }}
+              >
+                <MText
+                  style={{ color: 'blue', textDecorationLine: 'underline' }}
+                >
+                  Phụ lục sửa đổi thoả thuận cho vay
+                </MText>
+              </TouchableOpacity>
+            )}
+            <MButton
+              disabled={isLoading}
+              onPress={() => {
+                signContract();
+              }}
+            >
+              <LinearGradient
+                style={{
+                  height: 40,
+                  marginVertical: 16,
+                  borderRadius: 30,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+                colors={['#FF7A00', '#EF4123']}
+              >
                 <MText
                   style={[
                     commonStyles.textNormalBold,
                     {
-                      marginTop: 12,
-                      paddingHorizontal: 16,
-                      color: color.primary,
+                      color: 'white',
+                      textAlign: 'center',
                     },
                   ]}
                 >
-                  {eSignStore.currentTime}s
+                  Ký hợp đồng
                 </MText>
-              )}
-            </View>
-            <MButton onPress={() => setIsVisible(true)}>
-              <Image
-                source={{ uri: eSignStore.linkPreview }}
-                style={{
-                  width: Dimensions.get('window').width - 32,
-                  height: ((Dimensions.get('window').width - 32) * 16) / 9,
-                  marginHorizontal: 16,
-                  marginVertical: 12,
-                  backgroundColor: '#f0f0f0',
-                }}
-              />
+              </LinearGradient>
             </MButton>
-          </ScrollView>
+          </View>
         </View>
       </SafeAreaView>
+      <Modal isVisible={showModal}>
+        <View style={{ backgroundColor: 'white', padding: 16 }}>
+          <MText
+            style={{
+              fontSize: 12,
+              color: color.textHeader,
+              marginBottom: 10,
+            }}
+          >{`Nhập mã OTP`}</MText>
+          <Formik
+            initialValues={{
+              otp: __DEV__ ? '' : '',
+            }}
+            onSubmit={(values, setFieldValue) => {}}
+            validationSchema={yup.object().shape({
+              otp: yup.string().required('Yêu cầu mã OTP.'),
+            })}
+          >
+            {({ values, setFieldValue, setFieldTouched }) => (
+              <View>
+                <View style={[commonStyles.row, commonStyles.alignCenter]}>
+                  <MTextInput
+                    placeholderTextColor={'#939598'}
+                    placeholder={'••••••'}
+                    style={[
+                      commonStyles.textNormal,
+                      commonStyles.fill,
+                      {
+                        textAlign: 'center',
+                        fontSize: 16,
+                        borderRadius: 4,
+                        borderWidth: 1,
+                        borderColor: color.border,
+                        paddingVertical: Platform.OS === 'android' ? 8 : 14,
+                        paddingHorizontal: 16,
+                      },
+                    ]}
+                    onChangeText={(text) => {
+                      setFieldValue('otp', text);
+                      if (text.length === 6 && eSignStore.currentTime !== 0) {
+                        verify(text);
+                      }
+                    }}
+                    maxLength={6}
+                    onBlur={() => setFieldTouched('otp')}
+                    returnKeyType={'done'}
+                    value={values.otp}
+                    autoFocus={true}
+                    textContentType={'oneTimeCode'}
+                    keyboardType={'numeric'}
+                  />
+                </View>
+
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#AAAAAA',
+                    marginTop: 8,
+                    fontStyle: 'italic',
+                  }}
+                >{`Tin nhắn SMS sẽ được gửi tới số điện thoại của bạn có hạn là 5 phút`}</MText>
+
+                <Observer>
+                  {() => (
+                    <View style={{ alignItems: 'center' }}>
+                      {currentTime === 0 ? (
+                        <MButton
+                          onPress={reSendOTP}
+                          style={[
+                            commonStyles.alignCenter,
+                            commonStyles.justifyCenter,
+                            {
+                              marginTop: 12,
+                              backgroundColor: color.primary,
+                              height: 50,
+                              borderRadius: 4,
+                              paddingHorizontal: 20,
+                              marginLeft: 16,
+                            },
+                          ]}
+                        >
+                          {eSignStore.reSendOTPLoading ? (
+                            <ActivityIndicator color={'white'} size={'small'} />
+                          ) : (
+                            <MText
+                              style={[
+                                commonStyles.textNormalBold,
+                                { color: 'white' },
+                              ]}
+                            >
+                              Lấy OTP
+                            </MText>
+                          )}
+                        </MButton>
+                      ) : (
+                        <Observer>
+                          {() => (
+                            <MText
+                              style={[
+                                commonStyles.textNormalBold,
+                                {
+                                  marginTop: 12,
+                                  paddingHorizontal: 16,
+                                  color: color.primary,
+                                },
+                              ]}
+                            >
+                              {currentTime}s
+                            </MText>
+                          )}
+                        </Observer>
+                      )}
+                    </View>
+                  )}
+                </Observer>
+              </View>
+            )}
+          </Formik>
+        </View>
+      </Modal>
+
+      <Loading isLoading={loading} />
     </View>
   );
 });