react-native-timacare 2.0.14 → 2.0.16

package/src/components/MHeader.tsx

@@ -0,0 +1,101 @@
+//@ts-nocheck
+import React from 'react';
+import { Linking, TouchableOpacity, View } from 'react-native';
+import { Call, CloseIcon, IconBackWhite } from '../assets/icons';
+import { MText } from './MText';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  useNavigation,
+  StackActions,
+  CommonActions,
+} from '@react-navigation/native';
+import DeviceInfo from 'react-native-device-info';
+
+interface IProps {
+  title?: string;
+  onBack?: () => void;
+}
+export default function MHeader({ title, onBack }: IProps) {
+  const navigation = useNavigation();
+  return (
+    <LinearGradient colors={['#FF8E4F', '#EF592E']}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingTop: DeviceInfo.hasNotch() ? 60 : 24,
+          paddingBottom: 12,
+          justifyContent: 'space-between',
+          paddingHorizontal: 24,
+        }}
+      >
+        <View
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              if (onBack) onBack();
+            }}
+            style={{
+              width: 32,
+              height: 32,
+              justifyContent: 'center',
+            }}
+          >
+            <IconBackWhite />
+          </TouchableOpacity>
+          <MText
+            style={{
+              fontWeight: 'bold',
+              color: 'white',
+              fontSize: 16,
+            }}
+          >
+            {title}
+          </MText>
+        </View>
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: 'white',
+            flexDirection: 'row',
+            borderRadius: 16,
+            height: 30,
+            alignItems: 'center',
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              paddingHorizontal: 10,
+            }}
+            onPress={() => {
+              Linking.openURL(`tel:1900633688`);
+            }}
+          >
+            <Call />
+          </TouchableOpacity>
+          <View style={{ width: 1, height: 30, backgroundColor: 'white' }} />
+          <TouchableOpacity
+            style={{
+              paddingHorizontal: 10,
+            }}
+            onPress={() => {
+              navigation.dispatch(
+                CommonActions.reset({
+                  index: 1,
+                  routes: [{ name: 'Main' }],
+                })
+              );
+            }}
+          >
+            <CloseIcon />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </LinearGradient>
+  );
+}

package/src/navigation/primary-navigator.tsx

@@ -54,7 +54,7 @@ import PreviewContract from '../screens/eSign/PreviewContract';
 
 export const ScreenNames = {
   Splash: 'Splash',
-  Main: 'Main',
+  Main: 'HomeTimaCare',
   Support: 'Support',
   Compare: 'Compare',
   OTP: 'OTP',

package/src/screens/cimb-sign/index.tsx

@@ -8,6 +8,7 @@ import { IconBack } from '../../assets/icons';
 import { MText } from '../../components/MText';
 import { color } from '../../theme';
 import { commonStyles } from '../CommonStyles';
+import MHeader from '../../components/MHeader';
 
 export const CIMBSign = observer(function CIMBSign(props: any) {
   const navigation = useNavigation();
@@ -15,57 +16,40 @@ export const CIMBSign = observer(function CIMBSign(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
+      <MHeader
+        title="Ký hợp đồng"
+        onBack={() => {
+          if (
+            stateWebView &&
+            stateWebView?.url.includes('contract-status-approval')
+          ) {
+            navigation.goBack();
+          } else {
+            Alert.alert(
+              'Cảnh báo',
+              'Bạn có chắc chắn muốn rời khỏi màn hình ký hợp đồng?',
+              [
+                {
+                  text: 'Đồng ý',
+                  onPress: () => navigation.goBack(),
+                },
+                {
+                  text: 'Huỷ',
+                },
+              ]
+            );
+          }
+        }}
+        style={{
+          width: 40,
+          height: 40,
+          position: 'absolute',
+          left: 8,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      />
       <SafeAreaView style={{ flex: 1 }}>
-        <View
-          style={[
-            commonStyles.alignCenter,
-            { alignItems: 'center', height: 50, justifyContent: 'center' },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={() => {
-              if (
-                stateWebView &&
-                stateWebView?.url.includes('contract-status-approval')
-              ) {
-                navigation.goBack();
-              } else {
-                Alert.alert(
-                  'Cảnh báo',
-                  'Bạn có chắc chắn muốn rời khỏi màn hình ký hợp đồng?',
-                  [
-                    {
-                      text: 'Đồng ý',
-                      onPress: () => navigation.goBack(),
-                    },
-                    {
-                      text: 'Huỷ',
-                    },
-                  ]
-                );
-              }
-            }}
-            style={{
-              width: 40,
-              height: 40,
-              position: 'absolute',
-              left: 8,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconBack fill={color.textHeader} />
-          </TouchableOpacity>
-
-          <MText
-            style={[
-              commonStyles.textNormalBold,
-              { color: color.textHeader, fontSize: 16 },
-            ]}
-          >
-            Ký hợp đồng
-          </MText>
-        </View>
         <View style={{ flex: 1, marginBottom: 16 }}>
           <WebView
             source={{

package/src/screens/detail-loan/DetailLoanTima.tsx

@@ -16,6 +16,7 @@ import { Api } from '../../services/api';
 import { color } from '../../theme';
 import { commonStyles } from '../CommonStyles';
 import Loading from '../../components/Loading';
+import MHeader from '../../components/MHeader';
 
 export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
   const navigation = useNavigation();
@@ -50,36 +51,12 @@ export const DetailLoanTima = observer(function DetailLoanTima(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
+      <MHeader
+        title={`Đơn vay ${props.route?.params?.loan?.id}`}
+        onBack={() => navigation.goBack()}
+      />
       <SafeAreaView style={{ flex: 1 }}>
-        <View
-          style={[
-            commonStyles.alignCenter,
-            { alignItems: 'center', height: 50, justifyContent: 'center' },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={() => navigation.goBack()}
-            style={{
-              width: 40,
-              height: 40,
-              position: 'absolute',
-              left: 8,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconBack fill={color.textHeader} />
-          </TouchableOpacity>
-          <MText
-            style={[
-              commonStyles.textNormalBold,
-              { color: color.textHeader, fontSize: 16 },
-            ]}
-          >
-            Đơn vay {props.route?.params?.loan?.id}
-          </MText>
-        </View>
-        <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
+        <ScrollView style={{ flex: 1, paddingHorizontal: 16, marginTop: 16 }}>
           {data.map((item, index) => (
             <View
               key={index}

package/src/screens/detail-loan/PaymentInfo.tsx

@@ -20,6 +20,7 @@ import { color } from '../../theme';
 import { formatMoney } from '../../utils';
 import { commonStyles } from '../CommonStyles';
 import DetailLoanStore from './store';
+import MHeader from '../../components/MHeader';
 
 const logoView: ImageStyle = {
   position: 'absolute',
@@ -57,38 +58,14 @@ export const PaymentInfo = observer(function PaymentInfo(props: any) {
   return (
     <View style={{ flex: 1 }}>
       <Image source={require('../../assets/img/home.png')} style={logoView} />
+      <MHeader
+        title="Thông tin chuyển khoản"
+        onBack={() => {
+          navigation.goBack();
+        }}
+      />
       <SafeAreaView style={{ flex: 1 }}>
-        <View
-          style={[
-            commonStyles.alignCenter,
-            { alignItems: 'center', height: 50, justifyContent: 'center' },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={() => navigation.goBack()}
-            style={{
-              width: 40,
-              height: 40,
-              position: 'absolute',
-              left: 8,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconBack fill={color.textHeader} />
-          </TouchableOpacity>
-
-          <MText
-            style={[
-              commonStyles.textNormalBold,
-              { color: color.textHeader, fontSize: 16 },
-            ]}
-          >
-            Thông tin chuyển khoản
-          </MText>
-        </View>
-
-        <ScrollView style={{ flex: 1 }}>
+        <ScrollView style={{ flex: 1, marginTop: 16 }}>
           <View
             style={{
               marginHorizontal: 16,

package/src/screens/detail-loan/index.tsx

@@ -18,6 +18,7 @@ import { color } from '../../theme';
 import { commonStyles } from '../CommonStyles';
 import { Info } from './Info';
 import { Payment } from './Payment';
+import MHeader from '../../components/MHeader';
 const logoView: ImageStyle = {
   position: 'absolute',
   width: '100%',
@@ -31,49 +32,25 @@ export const DetailLoan = observer(function DetailLoan(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#FDFDFD' }}>
+      <MHeader
+        title={`Đơn vay ${props.route?.params?.loan?.id}`}
+        onBack={() =>
+          navigation.dispatch(
+            CommonActions.reset({
+              index: 1,
+              routes: [{ name: ScreenNames.Main }],
+            })
+          )
+        }
+      />
       <SafeAreaView style={{ flex: 1 }}>
-        <View
-          style={[
-            commonStyles.alignCenter,
-            { alignItems: 'center', height: 50, justifyContent: 'center' },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={() =>
-              navigation.dispatch(
-                CommonActions.reset({
-                  index: 1,
-                  routes: [{ name: ScreenNames.Main }],
-                })
-              )
-            }
-            style={{
-              width: 40,
-              height: 40,
-              position: 'absolute',
-              left: 8,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconBack fill={color.textHeader} />
-          </TouchableOpacity>
-
-          <MText
-            style={[
-              commonStyles.textNormalBold,
-              { color: color.textHeader, fontSize: 16 },
-            ]}
-          >
-            Đơn vay {props.route?.params?.loan?.id}
-          </MText>
-        </View>
         <View
           style={{
             flexDirection: 'row',
             backgroundColor: '#F2F2F2',
             borderRadius: 30,
             marginHorizontal: 16,
+            marginTop: 16,
           }}
         >
           <TouchableOpacity onPress={() => setTab(1)} style={{ flex: 1 }}>

package/src/screens/digital-lending/index.tsx

@@ -27,6 +27,7 @@ import { Step4 } from './Step4';
 import { Step5 } from './Step5';
 import { Step6 } from './Step6';
 import Loading from '../../components/Loading';
+import MHeader from '../../components/MHeader';
 
 export const DigitalLending = observer(function DigitalLending(props: any) {
   const navigation = useNavigation();
@@ -61,51 +62,21 @@ export const DigitalLending = observer(function DigitalLending(props: any) {
 
   return (
     <View style={[commonStyles.fill, { zIndex: 1, backgroundColor: 'white' }]}>
-      <LinearGradient colors={['#FF8E4F', '#EF592E']}>
-        <SafeAreaView style={{}}>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'center',
-              paddingHorizontal: 16,
-              alignItems: 'center',
-              height: 60,
-            }}
-          >
-            {digitalLendingStore.step === 1 && (
-              <MButton
-                style={{
-                  height: 32,
-                  width: 32,
-                  borderRadius: 30,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  position: 'absolute',
-                  left: 16,
-                }}
-                onPress={() => {
-                  navigation.pop();
-                  digitalLendingStore.clear();
-                  digitalLendingStore.data = {};
-                }}
-              >
-                <IconBackWhite />
-              </MButton>
-            )}
-            <MText
-              style={{
-                fontWeight: 'bold',
-                color: 'white',
-                fontSize: 16,
-              }}
-            >
-              Thông tin cá nhân
-            </MText>
-          </View>
-        </SafeAreaView>
-      </LinearGradient>
-
-      <Observer>{() => renderView(digitalLendingStore.step)}</Observer>
+      <MHeader
+        title="Thông tin cá nhân"
+        onBack={() => {
+          navigation.pop();
+          digitalLendingStore.clear();
+          digitalLendingStore.data = {};
+        }}
+      />
+      <SafeAreaView
+        style={{
+          flex: 1,
+        }}
+      >
+        <Observer>{() => renderView(digitalLendingStore.step)}</Observer>
+      </SafeAreaView>
     </View>
   );
 });

package/src/screens/eSign/PreviewContract.tsx

@@ -8,47 +8,20 @@ import { commonStyles } from '../CommonStyles';
 import MButton from '../../components/MButton';
 import { useNavigation } from '@react-navigation/native';
 import Pdf from 'react-native-pdf';
+import MHeader from '../../components/MHeader';
 
 export default function PreviewContract(props: any) {
   const navigation = useNavigation();
   const source = props?.route?.params;
   return (
     <View style={{ flex: 1, backgroundColor: 'white' }}>
+      <MHeader
+        title="Hợp đồng"
+        onBack={() => {
+          navigation.goBack();
+        }}
+      />
       <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

package/src/screens/eSign/index.tsx

@@ -34,6 +34,7 @@ import Pdf from 'react-native-pdf';
 import Modal from 'react-native-modal';
 import KeyboardSpacer from '../../components/keyboardspace';
 import Loading from '../../components/Loading';
+import MHeader from '../../components/MHeader';
 
 const webHookURL =
   'https://hooks.slack.com/services/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';
@@ -154,46 +155,14 @@ export const ESign = observer(function ESign(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: 'white' }}>
+      <MHeader
+        title="Ký hợp đồng"
+        onBack={() => {
+          back();
+        }}
+      />
       <SafeAreaView style={{ flex: 1 }}>
         <View style={{ flex: 1 }}>
-          <View
-            style={[
-              commonStyles.row,
-              commonStyles.alignCenter,
-              { paddingHorizontal: 16, height: 55 },
-            ]}
-          >
-            <MButton
-              //@ts-ignore
-              onPress={() => {
-                back();
-              }}
-              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,
-              }}
-            >
-              Ký hợp đồng
-            </MText>
-          </View>
-          <View style={{ backgroundColor: color.border }} />
-
           <View style={{ flex: 1 }}>
             <Pdf
               source={{

package/src/screens/full-submit/index.tsx

@@ -12,6 +12,7 @@ import { commonStyles } from '../CommonStyles';
 import FullSubmitStore from './store';
 import { UpdateDocument } from './update-document';
 import { UpdateInfo } from './update-info';
+import MHeader from '../../components/MHeader';
 
 export const FullSubmit = observer(function FullSubmit(props: any) {
   const navigation = useNavigation();
@@ -20,38 +21,14 @@ export const FullSubmit = observer(function FullSubmit(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
+      <MHeader
+        title="Hoàn thiện hồ sơ"
+        onBack={() => {
+          navigation.goBack();
+          FullSubmitStore.tab = 1;
+        }}
+      />
       <SafeAreaView style={{ flex: 1 }}>
-        <View
-          style={[
-            commonStyles.alignCenter,
-            { alignItems: 'center', height: 50, justifyContent: 'center' },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={() => {
-              navigation.goBack();
-              FullSubmitStore.tab = 1;
-            }}
-            style={{
-              width: 40,
-              height: 40,
-              position: 'absolute',
-              left: 8,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconBack fill={color.textHeader} />
-          </TouchableOpacity>
-          <MText
-            style={[
-              commonStyles.textNormalBold,
-              { color: color.textHeader, fontSize: 16 },
-            ]}
-          >
-            Hoàn thiện hồ sơ
-          </MText>
-        </View>
         <View
           style={{
             flexDirection: 'row',
@@ -59,6 +36,7 @@ export const FullSubmit = observer(function FullSubmit(props: any) {
             borderColor: '#EF4123',
             borderRadius: 30,
             marginHorizontal: 16,
+            marginTop: 16,
           }}
         >
           <View

package/src/screens/full-submit/selfie.tsx

@@ -21,6 +21,7 @@ import { MText } from '../../components/MText';
 import { ScreenNames } from '../../navigation';
 import { commonStyles } from '../CommonStyles';
 import FullSubmitStore from './store';
+import MHeader from '../../components/MHeader';
 
 const logoView: ImageStyle = {
   position: 'absolute',
@@ -75,35 +76,8 @@ export const CimbSelfie = observer(function CimbSelfie(props: any) {
   return (
     <View style={{ flex: 1 }}>
       <Image source={require('../../assets/img/EKYC.png')} style={logoView} />
+      <MHeader title="Xác thực khuôn mặt" onBack={() => navigation.goBack()} />
       <SafeAreaView style={commonStyles.fill}>
-        <View
-          style={[
-            commonStyles.alignCenter,
-            { alignItems: 'center', height: 50, justifyContent: 'center' },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={() => navigation.goBack()}
-            style={{
-              width: 40,
-              height: 40,
-              position: 'absolute',
-              left: 8,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IconBackWhite fill={'#FFFFFF'} />
-          </TouchableOpacity>
-          <MText
-            style={[
-              commonStyles.textNormalBold,
-              { color: '#FFFFFF', fontSize: 16 },
-            ]}
-          >
-            Xác thực khuôn mặt
-          </MText>
-        </View>
         <ScrollView style={commonStyles.fill}>
           <View style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
             <Image