react-native-timacare 3.3.17 → 3.3.19

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

@@ -10,9 +10,15 @@ import {
   ScrollView,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
 import { commonStyles } from '../CommonStyles';
-import { IconBack, IconCopy, IconDownload } from '../../assets/icons';
+import {
+  IconBack,
+  IconCopy,
+  IconDownload,
+  TimaSmall,
+} from '../../assets/icons';
 import { color } from '../../theme';
 import { MText } from '../../components/MText';
 import { useNavigation } from '@react-navigation/native';
@@ -22,19 +28,22 @@ import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import { formatMoney } from '../../utils';
 import MHeader from '../../components/MHeader';
+import ReactNativeModal from 'react-native-modal';
+import LinearGradient from 'react-native-linear-gradient';
+import moment from 'moment';
 
 export const ShowQrCode = observer(function ShowQrCode(props: any) {
   const navigation = useNavigation();
   const [linkImage, setLinkImage] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
-
+  const [showGuide, setShowGuide] = useState(false);
   const getData = () => {
     setIsLoading(true);
     Api.getInstance()
       .getQrPayment({
         LoanBriefId: props?.route?.params?.id,
         TypeCloseLoan: 0, // đóng tiền kỳ
-        Money: Number(props?.route?.params?.amount),
+        Money: Number(props?.route?.params?.item?.payMoney) || 0,
       })
       .then((response) => {
         setIsLoading(false);
@@ -60,8 +69,25 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
 
   return (
     <View style={{ flex: 1, backgroundColor: 'rgba(244, 244, 244, 1)' }}>
-      <MHeader title="Tất toán khoản vay" onBack={() => navigation.goBack()} />
-      <SafeAreaView style={{ flex: 1 }}>
+      <MHeader title={`Vay trực tuyến 24/7`} />
+      <View style={{ flex: 1 }}>
+        <View style={$header}>
+          <TouchableOpacity
+            style={$backButton}
+            onPress={() => navigation.goBack()}
+          >
+            <IconBack />
+          </TouchableOpacity>
+          <MText
+            style={{
+              fontSize: 16,
+              fontWeight: '600',
+              fontFamily: 'BeVietnamPro-SemiBold',
+            }}
+          >
+            THANH TOÁN KỲ
+          </MText>
+        </View>
         <ScrollView>
           <View
             style={{
@@ -122,6 +148,12 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
                   flexDirection: 'row',
                   alignItems: 'center',
                   gap: 5,
+                  backgroundColor: '#FFF7F0',
+                  borderWidth: 1,
+                  borderColor: '#EF592E',
+                  borderRadius: 4,
+                  paddingHorizontal: 8,
+                  paddingVertical: 4,
                 }}
                 onPress={async () => {
                   ReactNativeBlobUtil.config({
@@ -176,20 +208,80 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
                   fontSize: 12,
                   color: 'rgba(51, 51, 51, 1)',
                   fontWeight: '300',
+                  marginTop: 16,
+                }}
+              >
+                Số tài khoản
+              </MText>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <MText
+                  style={{
+                    color: 'rgba(61, 61, 61, 1)',
+                    fontWeight: '600',
+                    fontSize: 16,
+                    fontFamily: 'BeVietnamPro-SemiBold',
+                  }}
+                >
+                  {props.route.params?.data?.accountNumber}
+                </MText>
+                <TouchableOpacity
+                  onPress={() =>
+                    Clipboard.setString(props.route.params?.data?.accountNumber)
+                  }
+                >
+                  <IconCopy />
+                </TouchableOpacity>
+              </View>
+              <MText
+                style={{
+                  fontSize: 12,
+                  color: 'rgba(51, 51, 51, 1)',
+                  fontWeight: '300',
+                  marginTop: 16,
+                }}
+              >
+                Tên tài khoản thụ hưởng
+              </MText>
+              <MText
+                style={{
+                  color: 'rgba(61, 61, 61, 1)',
+                  fontWeight: '600',
+                  fontSize: 16,
+                  fontFamily: 'BeVietnamPro-SemiBold',
+                }}
+              >
+                {props.route.params?.data?.accountName}
+              </MText>
+              <MText
+                style={{
+                  fontSize: 12,
+                  color: 'rgba(51, 51, 51, 1)',
+                  fontWeight: '300',
+                  marginTop: 16,
                 }}
               >
-                Số tiền thanh toán
+                Số tiền phải trả
               </MText>
               <MText
                 style={{
                   fontSize: 16,
-                  color: color.primary,
                   fontWeight: '600',
+                  fontFamily: 'BeVietnamPro-SemiBold',
                 }}
               >
-                {formatMoney(props?.route?.params?.amount)} đ
+                {formatMoney(props?.route?.params?.item?.payMoney)} đ
+              </MText>
+              <MText
+                style={{ color: '#828282', fontSize: 10, fontStyle: 'italic' }}
+              >
+                Số tiền được tính đến ngày {moment().format('DD/MM/YYYY')}
               </MText>
-
               <MText
                 style={{
                   fontSize: 12,
@@ -198,7 +290,16 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
                   marginTop: 16,
                 }}
               >
-                Số tài khoản
+                Nội dung chuyển khoản{' '}
+                <MText
+                  style={{
+                    fontSize: 12,
+                    color: '#EB5757',
+                    fontWeight: '300',
+                  }}
+                >
+                  (Bắt buộc)
+                </MText>
               </MText>
               <View
                 style={{
@@ -212,42 +313,280 @@ export const ShowQrCode = observer(function ShowQrCode(props: any) {
                     color: 'rgba(61, 61, 61, 1)',
                     fontWeight: '600',
                     fontSize: 16,
+                    fontFamily: 'BeVietnamPro-SemiBold',
                   }}
                 >
-                  {props.route.params?.data?.accountNumber}
+                  TC{props.route.params?.codeId}
                 </MText>
                 <TouchableOpacity
                   onPress={() =>
-                    Clipboard.setString(props.route.params?.data?.accountNumber)
+                    Clipboard.setString(`TC${props.route.params?.codeId}`)
                   }
                 >
                   <IconCopy />
                 </TouchableOpacity>
               </View>
+            </View>
+            <View
+              style={{
+                backgroundColor: '#FFF2F2',
+                padding: 10,
+                borderRadius: 8,
+                marginTop: 16,
+              }}
+            >
               <MText
                 style={{
+                  color: '#EB5757',
                   fontSize: 12,
-                  color: 'rgba(51, 51, 51, 1)',
-                  fontWeight: '300',
-                  marginTop: 16,
+                  fontWeight: '600',
+                  fontFamily: 'BeVietnamPro-SemiBold',
                 }}
               >
-                Tên tài khoản thụ hưởng
+                *Lưu ý:
               </MText>
               <MText
                 style={{
-                  color: 'rgba(61, 61, 61, 1)',
-                  fontWeight: '600',
-                  fontSize: 16,
+                  fontSize: 12,
                 }}
               >
-                {props.route.params?.data?.accountName}
+                - Vui lòng sao chép đúng và đầy đủ nội dung thanh toán để hệ
+                thống ghi nhận giao dịch
+              </MText>
+              <MText
+                style={{
+                  fontSize: 12,
+                }}
+              >
+                - Thông tin tài khoản dịch vụ hỗ trợ thu hộ cung cấp bởi GPay.
+                Tài khoản chuyên dụng này chỉ dành cho mục đích trả nợ của bên
+                đi vay.
               </MText>
             </View>
           </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: 16,
+            }}
+          >
+            <MText>Hướng dẫn chuyển tiền</MText>
+            <TouchableOpacity onPress={() => setShowGuide(true)}>
+              <MText
+                style={{ color: '#2F80ED', textDecorationLine: 'underline' }}
+              >
+                Xem chi tiết
+              </MText>
+            </TouchableOpacity>
+          </View>
         </ScrollView>
-      </SafeAreaView>
+      </View>
       <Loading isLoading={isLoading} />
+      <ReactNativeModal
+        isVisible={showGuide}
+        onBackdropPress={() => setShowGuide(false)}
+        style={{ justifyContent: 'flex-end', margin: 0 }}
+      >
+        <View
+          style={{
+            backgroundColor: 'white',
+            borderTopLeftRadius: 30,
+            borderTopRightRadius: 30,
+          }}
+        >
+          <LinearGradient
+            colors={['#FF8E4F', '#EF592E']}
+            style={{
+              borderTopLeftRadius: 30,
+              borderTopRightRadius: 30,
+              paddingBottom: 24,
+            }}
+          >
+            <View style={{ padding: 16, alignItems: 'center', gap: 4 }}>
+              <MText
+                style={{
+                  fontSize: 16,
+                  fontWeight: '600',
+                  color: 'white',
+                  fontFamily: 'BeVietnamPro-SemiBold',
+                }}
+              >
+                CÁC BƯỚC TẤT TOÁN
+              </MText>
+              <MText
+                style={{
+                  fontSize: 12,
+                  color: 'white',
+                }}
+              >
+                Có 2 bước, vui lòng đọc kĩ thông tin
+              </MText>
+            </View>
+          </LinearGradient>
+          <View
+            style={{
+              backgroundColor: 'white',
+              borderTopLeftRadius: 30,
+              borderTopRightRadius: 30,
+              top: -24,
+              padding: 16,
+            }}
+          >
+            <MText
+              style={{
+                fontWeight: '600',
+                fontFamily: 'BeVietnamPro-SemiBold',
+                color: '#EF592E',
+              }}
+            >
+              BƯỚC 1: CHUYỂN KHOẢN
+            </MText>
+            <MText
+              style={{
+                fontWeight: '600',
+                fontFamily: 'BeVietnamPro-SemiBold',
+                marginTop: 8,
+              }}
+            >
+              Cách 1: Thanh toán bằng QR (Khuyến nghị)
+            </MText>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 8,
+              }}
+            >
+              <TimaSmall />
+              <MText style={{ flex: 1, fontSize: 12 }}>
+                Lưu hoặc quét mã QR
+              </MText>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 8,
+              }}
+            >
+              <TimaSmall />
+              <MText style={{ flex: 1, fontSize: 12 }}>
+                Mở app ngân hàng và thanh toán
+              </MText>
+            </View>
+            <View
+              style={{
+                height: 1,
+                backgroundColor: 'rgba(224, 224, 224, 1)',
+                marginVertical: 10,
+              }}
+            />
+            <MText
+              style={{
+                fontWeight: '600',
+                fontFamily: 'BeVietnamPro-SemiBold',
+              }}
+            >
+              Cách 2: Chuyển khoản thủ công
+            </MText>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 8,
+              }}
+            >
+              <TimaSmall />
+              <MText style={{ flex: 1, fontSize: 12 }}>
+                Copy thông tin tài khoản (Số TK, Ngân hàng, Số tiền)
+              </MText>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 8,
+              }}
+            >
+              <TimaSmall />
+              <MText style={{ flex: 1, fontSize: 12 }}>
+                <MText
+                  style={{
+                    color: '#EB5757',
+                    fontSize: 12,
+                    fontWeight: '600',
+                    fontFamily: 'BeVietnamPro-SemiBold',
+                  }}
+                >
+                  BẮT BUỘC:
+                </MText>{' '}
+                Copy đúng “Nội dung chuyển khoản”
+              </MText>
+            </View>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 8,
+              }}
+            >
+              <TimaSmall />
+              <MText style={{ flex: 1, fontSize: 12 }}>
+                Mở app ngân hàng và thanh toán
+              </MText>
+            </View>
+            <View
+              style={{
+                height: 12,
+                backgroundColor: '#FFF3E9',
+                marginVertical: 10,
+                marginHorizontal: -16,
+              }}
+            />
+            <MText
+              style={{
+                fontWeight: '600',
+                fontFamily: 'BeVietnamPro-SemiBold',
+                color: '#EF592E',
+              }}
+            >
+              BƯỚC 2:
+            </MText>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                marginTop: 8,
+              }}
+            >
+              <TimaSmall />
+              <MText style={{ flex: 1, fontSize: 12 }}>
+                Chọn “Xác nhận tất toán” để gửi yêu cầu tới Tima thực hiện “Tất
+                toán hợp đồng”
+              </MText>
+            </View>
+          </View>
+        </View>
+      </ReactNativeModal>
     </View>
   );
 });
+const $backButton: ViewStyle = {
+  position: 'absolute',
+  left: 16,
+};
+
+const $header: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingVertical: 16,
+  justifyContent: 'center',
+};