@tima2025/react-native-timalender 1.0.0

package/src/screens/SignContractGpayTima/ConfirmContact.tsx

@@ -0,0 +1,255 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import Lottie from 'lottie-react-native';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import {
+  Image,
+  ImageStyle,
+  Modal,
+  SafeAreaView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import { showMessage } from 'react-native-flash-message';
+import IoIcon from 'react-native-vector-icons/Ionicons';
+import { useDispatch, useSelector } from 'react-redux';
+import successful from '../../assets/JSON/successful.json';
+import Colors from '../../common/Colors';
+import Loading from '../../common/Loading';
+import { actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import { verifyGpayOnboarding } from '../../components/Features/Lender/lenderSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import { load } from '../../components/Storage/storage';
+import useGetUser from '../../hooks/useGetUser';
+
+const CELL_COUNT = 4;
+
+const logoView: ImageStyle = {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  resizeMode: 'cover',
+};
+
+export default function ConfirmContact({ navigation, route }: any) {
+  const dispatch = useDispatch<AppDispatch>();
+  const userInfo = useGetUser();
+  const isLoading = useSelector(selectLoading);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [expire_time, setExpireTime] = useState(180);
+  const [value, setValue] = useState('');
+  const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT });
+  const [ref_id, setRef_id] = useState('');
+  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  useEffect(() => {
+    loadRefID();
+  }, []);
+
+  const loadRefID = async () => {
+    const data = await load('reference_id');
+    setRef_id(data);
+  };
+
+  useEffect(() => {
+    let interval = setInterval(() => {
+      if (expire_time > 0) {
+        setExpireTime(expire_time - 1);
+      } else {
+        clearInterval(interval);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [expire_time]);
+
+  const onSubmit = async () => {
+    const params = {
+      otp: value,
+      reference_id: ref_id,
+    };
+    const resp: any = await dispatch(verifyGpayOnboarding(params));
+    console.log('resp', resp);
+    if (resp?.payload?.meta?.errCode === 200) {
+      setShowSuccess(true);
+      setTimeout(() => {
+        navigation.navigate(Screens.SignContractTimaGpay);
+      }, 2000);
+    } else {
+      // WToastShowError(resp?.payload?.meta?.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: resp?.payload?.meta?.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <StatusBar barStyle={'light-content'} />
+      <Image
+        source={require('../../assets/images/Optional/Group1.png')}
+        style={logoView}
+      />
+      <SafeAreaView>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: 5,
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => navigation.goBack()}
+            style={{
+              position: 'absolute',
+              left: 6,
+              width: 40,
+              height: 40,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <IoIcon name="chevron-back" size={26} color="white" />
+          </TouchableOpacity>
+          <RText
+            style={{
+              color: 'white',
+              fontSize: 16,
+              fontWeight: 'bold',
+            }}
+          >
+            Xác thực OTP
+          </RText>
+        </View>
+      </SafeAreaView>
+      <View
+        style={{ alignItems: 'center', justifyContent: 'center', padding: 24 }}
+      >
+        <RText style={{ textAlign: 'center', color: 'white' }}>
+          Mã xác thực OTP của bạn sẽ được gửi vào số điện thoại{' '}
+          {userInfo?.phone}, vui lòng nhập mã để hoàn thành ký hợp đồng.
+        </RText>
+      </View>
+      <CodeField
+        ref={ref}
+        {...props}
+        value={value}
+        onChangeText={setValue}
+        cellCount={CELL_COUNT}
+        rootStyle={{
+          width: '70%',
+          alignSelf: 'center',
+          marginBottom: actuatedNormalize(40),
+        }}
+        keyboardType="numeric"
+        textContentType="jobTitle"
+        renderCell={({ index, symbol, isFocused }) => (
+          <View
+            // Make sure that you pass onLayout={getCellOnLayoutHandler(index)} prop to root component of "Cell"
+            onLayout={getCellOnLayoutHandler(index)}
+            key={index}
+            style={{
+              width: actuatedNormalize(54),
+              height: actuatedNormalize(54),
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: '#EFEFEF',
+              marginHorizontal: 4,
+              borderRadius: actuatedNormalize(8),
+            }}
+          >
+            <Text
+              style={{
+                color: '#000',
+                fontSize: 24,
+                textAlign: 'center',
+                fontWeight: '700',
+              }}
+            >
+              {symbol || (isFocused ? <Cursor /> : null)}
+            </Text>
+          </View>
+        )}
+      />
+      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+        <TouchableOpacity
+          onPress={() => onSubmit()}
+          style={{
+            height: 40,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'white',
+            paddingHorizontal: 46,
+            borderRadius: 6,
+          }}
+        >
+          <Text style={{ color: '#333333' }}>Xác nhận</Text>
+        </TouchableOpacity>
+      </View>
+      <Text style={{ textAlign: 'center', marginTop: 10, color: 'white' }}>
+        Gửi lại mã OTP sau ({moment.utc(expire_time * 1000).format('mm:ss')})
+      </Text>
+      {isLoading ? <Loading /> : <View />}
+
+      <Modal transparent={true} animationType={'none'} visible={showSuccess}>
+        <View style={styles.modalBackground}>
+          <View style={styles.activityIndicatorWrapper}>
+            <Lottie
+              source={successful}
+              autoPlay
+              loop
+              style={{
+                width: actuatedNormalize(88),
+                height: actuatedNormalize(88),
+              }}
+            />
+            <RText
+              style={{
+                color: '#FFFFFF',
+                fontWeight: 'bold',
+                fontSize: 16,
+                marginTop: 16,
+              }}
+            >
+              Ký hợp đồng thành công !
+            </RText>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  modalBackground: {
+    flex: 1,
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    backgroundColor: '#00000090',
+  },
+  activityIndicatorWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+});

package/src/screens/SignContractGpayTima/SignContract.tsx

@@ -0,0 +1,142 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react';
+import {
+  ActivityIndicator,
+  Linking,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { showMessage } from 'react-native-flash-message';
+import LinearGradient from 'react-native-linear-gradient';
+import Pdf from 'react-native-pdf';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useDispatch, useSelector } from 'react-redux';
+import AppHeader from '../../common/AppHeader';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import RText from '../../common/RText';
+import { confirmGpayOnboarding } from '../../components/Features/Lender/lenderSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { AppDispatch } from '../../components/Redux/store';
+import { save } from '../../components/Storage/storage';
+
+export default function SignContract({ navigation, route }: any) {
+  const dispatch = useDispatch<AppDispatch>();
+  const isLoading = useSelector(selectLoading);
+  const [check, setCheck] = useState(false);
+  const data = route?.params?.data;
+  const source = {
+    uri: data?.urlContract ? data?.urlContract : data?.url,
+    cache: true,
+    headers: {
+      'Content-Type': 'application/pdf',
+    },
+  };
+
+  const InitSignContract = async () => {
+    navigation.navigate(Screens.EkycLiveness);
+    const params = {
+      reference_id: data?.reference_id,
+    };
+    const response: any = await dispatch(confirmGpayOnboarding(params));
+    console.log('response', response);
+    if (response?.payload.meta.errCode === 200) {
+      save('reference_id', response?.payload.data);
+      navigation.navigate(Screens.EkycLiveness, {
+        reference_id: response?.payload.data,
+      });
+    } else {
+      // WToastShowError(response?.payload.meta.errMessage);
+      showMessage({
+        message: 'Thông báo',
+        description: response?.payload.meta.errMessage,
+        type: 'danger',
+        icon: 'warning',
+        backgroundColor: Colors.DANGER,
+      });
+    }
+  };
+
+  return (
+    <Container>
+      <AppHeader title="Hợp đồng Tima - Gpay - Lender" />
+
+      <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}`);
+            Linking.openURL(uri);
+          }}
+          style={{
+            flex: 1,
+          }}
+          trustAllCerts={false}
+        />
+      </View>
+
+      {data?.url ? (
+        <View
+          style={{
+            backgroundColor: 'white',
+            marginVertical: 16,
+            paddingHorizontal: 16,
+          }}
+        >
+          <View style={{ flexDirection: 'row' }}>
+            <TouchableOpacity
+              style={{ marginLeft: 8 }}
+              onPress={() => setCheck(!check)}
+            >
+              {check ? (
+                <Icon name="checkbox" size={24} color={Colors.ORANGE} />
+              ) : (
+                <Icon name="square-outline" size={24} color="#BDBDBD" />
+              )}
+            </TouchableOpacity>
+            <RText style={{ color: '#333333', paddingLeft: 10 }}>
+              Tôi đồng ý với tất cả những điều kiện trong{'\n'} hợp đồng.
+            </RText>
+          </View>
+
+          <TouchableOpacity onPress={InitSignContract} disabled={!check}>
+            <LinearGradient
+              colors={check ? ['#FF7A00', '#EF4123'] : ['#BDBDBD', '#BDBDBD']}
+              style={{
+                height: 40,
+                justifyContent: 'center',
+                borderRadius: 6,
+                marginBottom: 16,
+                alignItems: 'center',
+                marginTop: 40,
+              }}
+            >
+              {isLoading ? (
+                <ActivityIndicator color={'white'} />
+              ) : (
+                <RText style={{ color: 'white', fontSize: 16 }}>
+                  Ký hợp đồng
+                </RText>
+              )}
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <View />
+      )}
+
+      {/* {isLoading ? <Loading /> : <View />} */}
+    </Container>
+  );
+}

package/src/screens/SignContractGpayTima/index.tsx

@@ -0,0 +1,136 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { Alert, Image, TouchableOpacity, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import imageOptions from '../../assets/images/Optional';
+import AppHeader from '../../common/AppHeader';
+import BSubmit from '../../common/BSubmit/BSubmit';
+import Colors from '../../common/Colors';
+import Container from '../../common/Container';
+import EmptyView from '../../common/EmptyView';
+import FlexRow from '../../common/FlexRow';
+import Loading from '../../common/Loading';
+import { Shadow, actuatedNormalize } from '../../common/Metrics';
+import RText from '../../common/RText';
+import SpaceBetween from '../../common/SpaceBetween';
+import { getGpayContracts } from '../../components/Features/Lender/lenderSlice';
+import Screens from '../../components/Navigation/Screens';
+import { selectLoading } from '../../components/Redux/selector';
+import { useAppDispatch } from '../../components/Redux/store';
+import ModalChooseMoney from './Components/ModalChooseMoney';
+
+export const SignContractGpayTima = ({ navigation }: any) => {
+  const dispatch = useAppDispatch();
+  const isLoading = useSelector(selectLoading);
+  const [data, setData] = useState<any>(null);
+  const [openModal, setOpenModal] = useState(false);
+
+  const getData = async () => {
+    const resp: any = await dispatch(getGpayContracts());
+    console.log(resp);
+    if (resp.payload.meta.errCode === 200) {
+      setData(resp.payload.data);
+    } else {
+      // WToastShowError(resp.payload.meta.errMessage);
+      Alert.alert('Thông báo', resp.payload.meta.errMessage);
+    }
+  };
+
+  useEffect(() => {
+    return navigation.addListener('focus', () => {
+      getData();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation]);
+  return (
+    <Container>
+      <AppHeader
+        title="HỢP ĐỒNG TIMA - GPAY - LENDER"
+        goBack={() => navigation.navigate(Screens.Gpay)}
+      />
+      <View style={{ padding: actuatedNormalize(16) }}>
+        {data ? (
+          <TouchableOpacity
+            onPress={() => {
+              data?.statusEsign === 1
+                ? null
+                : navigation.navigate(Screens.SignContract, { data });
+            }}
+            style={{
+              backgroundColor: Colors.WHITE,
+              padding: actuatedNormalize(16),
+              borderRadius: 4,
+              ...Shadow,
+            }}
+          >
+            <FlexRow>
+              <Image
+                source={imageOptions.ic_pdf_tima_gpay}
+                style={{
+                  width: actuatedNormalize(32),
+                  height: actuatedNormalize(32),
+                }}
+              />
+              <RText
+                textStyle={{
+                  fontWeight: '600',
+                  padding: actuatedNormalize(12),
+                }}
+              >
+                Hợp đồng điện tử Tima - Gpay - Lender
+              </RText>
+            </FlexRow>
+            <SpaceBetween
+              style={{
+                paddingTop: actuatedNormalize(12),
+              }}
+            >
+              <View>
+                <RText
+                  textStyle={{
+                    color: Colors.GRAY_3,
+                    fontSize: actuatedNormalize(10),
+                  }}
+                >
+                  Trạng thái:
+                </RText>
+                <RText
+                  textStyle={{
+                    color: Colors.RED,
+                    fontWeight: '600',
+                    paddingTop: actuatedNormalize(4),
+                    fontSize: actuatedNormalize(12),
+                  }}
+                >
+                  {data?.statusEsignName}
+                </RText>
+              </View>
+              <BSubmit
+                text={'Xem chi tiết'}
+                onPress={() => {
+                  data?.statusEsign === 1
+                    ? setOpenModal(true)
+                    : navigation.navigate(Screens.SignContract, { data });
+                }}
+                buttonStyle={{
+                  width: actuatedNormalize(106),
+                  height: actuatedNormalize(30),
+                  borderRadius: 6,
+                }}
+                textStyle={{ fontSize: actuatedNormalize(14) }}
+              />
+            </SpaceBetween>
+          </TouchableOpacity>
+        ) : (
+          <EmptyView text={'Bạn không có hợp đồng nào !'} />
+        )}
+      </View>
+      {isLoading ? <Loading /> : <View />}
+      <ModalChooseMoney
+        isVisible={openModal}
+        onClose={() => setOpenModal(false)}
+      />
+    </Container>
+  );
+};