react-native-timacare 3.3.47 → 3.3.48

package/src/screens/detail-loan-tima/InforLoan.tsx

@@ -7,6 +7,10 @@ import { formatDDMMYYY, formatMoney } from '../../utils';
 import { Api } from '../../services/api';
 import { color } from '../../theme';
 import { SkeletonDisbursedList } from '../../components/SkeletonLoanCard';
+import LinearGradient from 'react-native-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import { commonStyles } from '../CommonStyles';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const cardStyle = {
   backgroundColor: '#FFFFFF',
@@ -43,14 +47,17 @@ const InfoRow = ({ label, value, valueColor = '#1A1A1A' }) => (
 );
 
 export default function InforLoan({ id }: { id: number }) {
+  const navigation = useNavigation();
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<any>();
   const [expanded, setExpanded] = useState(false);
+  const insets = useSafeAreaInsets();
 
   const getData = async () => {
     try {
       setIsLoading(true);
       const response = await Api.getInstance().get_detail_loan_tima(id);
+      console.log(response);
       if (response.kind === 'ok') {
         if (response.data?.meta?.errorCode === 200) {
           setData(response.data?.data);
@@ -80,120 +87,155 @@ export default function InforLoan({ id }: { id: number }) {
   }
 
   return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{ paddingVertical: 16 }}
-    >
-      {/* Thẻ thông tin hợp đồng giải ngân */}
-      <View style={cardStyle}>
-        <InfoRow label="Mã HĐ giải ngân" value={data?.contractCode || ''} />
-        <InfoRow
-          label="Số tiền giải ngân"
-          value={`${formatMoney(data?.totalMoneyDisbursement || 0)} đ`}
-        />
-        <InfoRow
-          label="Thời hạn"
-          value={data?.loanTime ? `${data?.loanTime} tháng` : ''}
-        />
-        <InfoRow
-          label="Ngày giải ngân"
-          value={data?.fromDate ? formatDDMMYYY(data?.fromDate) : ''}
-        />
-        <InfoRow
-          label="Ngày đến hạn tiếp theo"
-          value={data?.nextDate ? formatDDMMYYY(data?.nextDate) : ''}
-        />
-        <InfoRow label="Trạng thái Hợp đồng" value={data?.statusName || ''} />
-      </View>
-
-      {/* Thẻ tổng phải trả + trạng thái thanh toán */}
-      <View
-        style={[
-          {
-            marginTop: 16,
-            marginHorizontal: 16,
-            paddingHorizontal: 16,
-            paddingVertical: 8,
-            borderRadius: 12,
-            borderWidth: 1,
-            borderColor: '#E0E0E0',
-          },
-        ]}
+    <>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingVertical: 16 }}
       >
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onPress={() => setExpanded((prev) => !prev)}
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            paddingVertical: 12,
-          }}
+        {/* Thẻ thông tin hợp đồng giải ngân */}
+        <View style={cardStyle}>
+          <InfoRow label="Mã HĐ giải ngân" value={data?.contractCode || ''} />
+          <InfoRow
+            label="Số tiền giải ngân"
+            value={`${formatMoney(data?.totalMoneyDisbursement || 0)} đ`}
+          />
+          <InfoRow
+            label="Thời hạn"
+            value={data?.loanTime ? `${data?.loanTime} tháng` : ''}
+          />
+          <InfoRow
+            label="Ngày giải ngân"
+            value={data?.fromDate ? formatDDMMYYY(data?.fromDate) : ''}
+          />
+          <InfoRow
+            label="Ngày đến hạn tiếp theo"
+            value={data?.nextDate ? formatDDMMYYY(data?.nextDate) : ''}
+          />
+          <InfoRow label="Trạng thái Hợp đồng" value={data?.statusName || ''} />
+        </View>
+
+        {/* Thẻ tổng phải trả + trạng thái thanh toán */}
+        <View
+          style={[
+            {
+              marginTop: 16,
+              marginHorizontal: 16,
+              paddingHorizontal: 16,
+              paddingVertical: 8,
+              borderRadius: 12,
+              borderWidth: 1,
+              borderColor: '#E0E0E0',
+            },
+          ]}
         >
-          <MText style={{ fontSize: 14, color: '#4F4F4F' }}>
-            Tổng phải trả
-          </MText>
-          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <MText
-              style={{
-                fontSize: 14,
-                fontWeight: '600',
-                fontFamily: 'BeVietnamPro-SemiBold',
-                color: color.primary,
-                marginRight: 8,
-              }}
-            >
-              {formatMoney(data?.totalMoneyNeedPay || 0)} đ
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => setExpanded((prev) => !prev)}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingVertical: 12,
+            }}
+          >
+            <MText style={{ fontSize: 14, color: '#4F4F4F' }}>
+              Tổng phải trả
             </MText>
-            <View
-              style={{
-                transform: [{ rotate: expanded ? '180deg' : '0deg' }],
-              }}
-            >
-              <IconArrowDown width={14} height={14} fill="#828282" />
-            </View>
-          </View>
-        </TouchableOpacity>
-        {/* Chi tiết kỳ thanh toán khi mở rộng */}
-        {expanded &&
-          data?.schedules?.map((item, index) => (
-            <View
-              key={item?.paymentScheduleID || index}
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingVertical: 8,
-                paddingHorizontal: 24,
-              }}
-            >
-              <MText style={{ fontSize: 13, color: '#828282' }}>
-                {formatDDMMYYY(item?.payDate)}
-              </MText>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               <MText
                 style={{
-                  fontSize: 13,
-                  color: '#828282',
+                  fontSize: 14,
+                  fontWeight: '600',
+                  fontFamily: 'BeVietnamPro-SemiBold',
+                  color: color.primary,
+                  marginRight: 8,
                 }}
               >
-                {formatMoney(item?.moneyNeedPay || 0)} đ
+                {formatMoney(data?.totalMoneyNeedPay || 0)} đ
               </MText>
+              <View
+                style={{
+                  transform: [{ rotate: expanded ? '180deg' : '0deg' }],
+                }}
+              >
+                <IconArrowDown width={14} height={14} fill="#828282" />
+              </View>
             </View>
-          ))}
-        {expanded && (
-          <View
+          </TouchableOpacity>
+          {/* Chi tiết kỳ thanh toán khi mở rộng */}
+          {expanded &&
+            data?.schedules?.map((item, index) => (
+              <View
+                key={item?.paymentScheduleID || index}
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  paddingVertical: 8,
+                  paddingHorizontal: 24,
+                }}
+              >
+                <MText style={{ fontSize: 13, color: '#828282' }}>
+                  {formatDDMMYYY(item?.payDate)}
+                </MText>
+                <MText
+                  style={{
+                    fontSize: 13,
+                    color: '#828282',
+                  }}
+                >
+                  {formatMoney(item?.moneyNeedPay || 0)} đ
+                </MText>
+              </View>
+            ))}
+          {expanded && (
+            <View
+              style={{
+                height: 1,
+                backgroundColor: '#E0E0E0',
+              }}
+            />
+          )}
+          <InfoRow
+            label="Trạng thái"
+            value={data?.paymentStatusName || ''}
+            valueColor={data?.isPaid ? '#27AE60' : color.primary}
+          />
+        </View>
+      </ScrollView>
+      <View
+        style={{
+          paddingHorizontal: 16,
+          marginBottom: insets.bottom,
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => {
+            navigation.navigate('ShowQrCode', {
+              data,
+              id: id,
+              item: {
+                payMoney: data?.totalMoneyNeedPay,
+              },
+            });
+          }}
+        >
+          <LinearGradient
+            colors={['#FF7A00', '#EF4123']}
             style={{
-              height: 1,
-              backgroundColor: '#E0E0E0',
+              borderRadius: 30,
+              paddingHorizontal: 24,
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: 40,
             }}
-          />
-        )}
-        <InfoRow
-          label="Trạng thái"
-          value={data?.paymentStatusName || ''}
-          valueColor={data?.isPaid ? '#27AE60' : color.primary}
-        />
+          >
+            <MText style={[commonStyles.textNormalBold, { color: '#FDFDFD' }]}>
+              Thanh toán
+            </MText>
+          </LinearGradient>
+        </TouchableOpacity>
       </View>
-    </ScrollView>
+    </>
   );
 }