Add Transaction Details screen

2025-08-15 13:29:42 +05:30 · 2025-08-15 13:29:42 +05:30 · 9dd62f9377
parent 75a3eb87e1
commit 9dd62f9377
3 changed files with 97 additions and 104 deletions
--- a/app/(tabs)/payments.tsx
+++ b/app/(tabs)/payments.tsx
@ -460,6 +460,7 @@ export default function PaymentsTabScreen() {
                  : paymentHistory.slice(0, 3)
                ).map((payment) => (
                  <PaymentHistoryCard
+                    id={payment.id}
                    key={payment.id}
                    date={formatPaymentDate(payment.payment_date)}
                    amount={formatCurrency(parseFloat(payment.amount))}
--- a/app/payments/TransactionDetails.tsx
+++ b/app/payments/TransactionDetails.tsx
@ -17,6 +17,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import SuccessIcon from "@/assets/icons/check_circle.svg";
 import FailureIcon from "@/assets/icons/cancel.svg";
 import PendingIcon from "@/assets/icons/pending.svg";
+import Header from "@/components/common/Header";

 interface TransactionDetailData {
  id: number;
@ -56,28 +57,6 @@ export default function TransactionDetailScreen() {
    useState<TransactionDetailData | null>(null);
  const [isLoading, setIsLoading] = useState(true);

-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerStyle: {
-        backgroundColor: "#F3F5F8",
-      },
-      headerTitle: "Transaction Detail",
-      headerTitleStyle: {
-        fontSize: 18,
-        fontWeight: "600",
-        color: "#111827",
-      },
-      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => router.back()}
-          style={styles.backButton}
-        >
-          <Text style={styles.backText}>‹</Text>
-        </TouchableOpacity>
-      ),
-    });
-  }, [navigation, router]);
-
  useEffect(() => {
    fetchTransactionDetail();
  }, [paymentId]);
@ -86,7 +65,7 @@ export default function TransactionDetailScreen() {
    try {
      setIsLoading(true);
      const response = await api.get(
-        `${BASE_URL}/api/v1/payment-history?id=${paymentId}`
+        `${BASE_URL}/api/v1/payment-history?page_number=1&page_size=10&id=${paymentId}`
      );
      const result: TransactionResponse = response.data;

@ -140,12 +119,9 @@ export default function TransactionDetailScreen() {

  const getStatusText = (status: string) => {
    switch (status.toLowerCase()) {
-      case "success":
-      case "completed":
      case "confirmed":
        return "Payment successful";
      case "failure":
-      case "failed":
        return "Payment failed";
      case "pending":
        return "Payment pending";
@ -154,86 +130,73 @@ export default function TransactionDetailScreen() {
    }
  };

-  if (isLoading) {
-    return (
-      <SafeAreaView style={styles.container}>
+  return (
+    <>
+      <Header title="Transaction Details" showBackButton={true} />
+      {isLoading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#00BE88" />
        </View>
-      </SafeAreaView>
-    );
-  }
-
-  if (!transactionData) {
-    return (
-      <SafeAreaView style={styles.container}>
+      ) : !transactionData ? (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>Transaction not found</Text>
        </View>
-      </SafeAreaView>
-    );
-  }
+      ) : (
+        <View style={styles.container}>
+          <View style={styles.content}>
+            <View style={styles.iconContainer}>
+              {getStatusIcon(transactionData.status)}
+            </View>
+            <Text style={styles.amount}>
+              {formatCurrency(transactionData.amount)}
+            </Text>

-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.content}>
-        {/* Status Icon */}
-        <View style={styles.iconContainer}>
-          {getStatusIcon(transactionData.status)}
+            <Text style={styles.statusText}>
+              {getStatusText(transactionData.status)}
+            </Text>
+            <Text style={styles.dateTime}>
+              {formatDateTime(transactionData.transaction_date)}
+            </Text>
+
+            <View style={styles.divider} />
+            <View style={styles.detailsCard}>
+              <Text style={styles.detailsTitle}>Transaction Details</Text>
+
+              <DetailRow
+                label="Payment mode"
+                value={transactionData.payment_mode.join(", ") || "--"}
+              />
+
+              <DetailRow
+                label="Paid to"
+                value={transactionData.upi_handle || "--"}
+              />
+
+              <DetailRow
+                label="Paid by"
+                value={transactionData.paid_by_upi_handle || "--"}
+              />
+
+              <DetailRow
+                label="Order ID"
+                value={transactionData.order_id || "--"}
+              />
+
+              <DetailRow
+                label="Transaction ID"
+                value={transactionData.transaction_order_id || "--"}
+              />
+
+              <DetailRow
+                label="RRN"
+                value={transactionData.payment_reference_id || "--"}
+                isLast={true}
+              />
+            </View>
+          </View>
        </View>
-
-        {/* Amount */}
-        <Text style={styles.amount}>
-          {formatCurrency(transactionData.amount)}
-        </Text>
-
-        {/* Status Text */}
-        <Text style={styles.statusText}>
-          {getStatusText(transactionData.status)}
-        </Text>
-
-        {/* Date Time */}
-        <Text style={styles.dateTime}>
-          {formatDateTime(transactionData.transaction_date)}
-        </Text>
-
-        {/* Transaction Details Card */}
-        <View style={styles.detailsCard}>
-          <Text style={styles.detailsTitle}>Transaction Details</Text>
-
-          <DetailRow
-            label="Payment mode"
-            value={transactionData.payment_mode.join(", ") || "--"}
-          />
-
-          <DetailRow
-            label="Paid to"
-            value={transactionData.upi_handle || "--"}
-          />
-
-          <DetailRow
-            label="Paid by"
-            value={transactionData.paid_by_upi_handle || "--"}
-          />
-
-          <DetailRow
-            label="Order ID"
-            value={transactionData.order_id || "--"}
-          />
-
-          <DetailRow
-            label="Transaction ID"
-            value={transactionData.transaction_order_id || "--"}
-          />
-
-          <DetailRow
-            label="RRN"
-            value={transactionData.payment_reference_id || "--"}
-            isLast={true}
-          />
-        </View>
-      </View>
-    </SafeAreaView>
+      )}
+    </>
  );
 }

@ -253,9 +216,15 @@ const DetailRow = ({
 );

 const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    width: "100%",
+    backgroundColor: "#E5E9F0",
+  },
  container: {
    flex: 1,
    backgroundColor: "#F3F5F8",
+    paddingHorizontal: 16,
  },
  loadingContainer: {
    flex: 1,
@ -272,9 +241,9 @@ const styles = StyleSheet.create({
    color: "#6B7280",
  },
  content: {
-    flex: 1,
    padding: 16,
    alignItems: "center",
+    backgroundColor: "#FCFCFC",
  },
  backButton: {
    paddingLeft: 16,
@ -351,7 +320,6 @@ const styles = StyleSheet.create({
    justifyContent: "space-between",
    alignItems: "flex-start",
    paddingVertical: 8,
-    borderBottomWidth: 1,
    borderBottomColor: "#E5E9F0",
  },
  detailRowLast: {
@ -367,6 +335,6 @@ const styles = StyleSheet.create({
    fontWeight: "600",
    color: "#252A34",
    flex: 1,
-    textAlign: "right",
+    textAlign: "left",
  },
 });
--- a/components/Payments/PaymentHistoryCard.tsx
+++ b/components/Payments/PaymentHistoryCard.tsx
@ -1,4 +1,5 @@
-import { Text, View } from "react-native";
+import { useRouter } from "expo-router";
+import { Text, TouchableOpacity, View } from "react-native";

 interface PaymentHistoryCardProps {
  date: string;
@ -6,9 +7,11 @@ interface PaymentHistoryCardProps {
  time: string;
  method: string;
  status: string;
+  id: number;
 }

 export default ({
+  id,
  date,
  amount,
  time,
@ -16,6 +19,16 @@ export default ({
  status,
 }: PaymentHistoryCardProps) => {
  //failure, confirmed, pending
+
+  const router = useRouter();
+
+  const handlePress = () => {
+    router.push({
+      pathname: "/payments/TransactionDetails",
+      params: { paymentId: id },
+    });
+  };
+
  console.log(status, "payment Status");
  const getStatusStyle = (status: string) => {
    switch (status.toLowerCase()) {
@ -45,7 +58,8 @@ export default ({
  const statusStyle = getStatusStyle(status);

  return (
-    <View style={styles.paymentCard}>
+    // <TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
+    <TouchableOpacity style={styles.paymentCard} onPress={handlePress}>
      <View style={styles.paymentCardTop}>
        <Text style={styles.paymentDate}>{date}</Text>
        <Text style={styles.paymentAmount}>{amount}</Text>
@ -67,7 +81,8 @@ export default ({
          </View>
        )}
      </View>
-    </View>
+    </TouchableOpacity>
+    // </TouchableOpacity>
  );
 };

@ -83,6 +98,15 @@ const styles = StyleSheet.create({
    paddingHorizontal: 12,
    flexDirection: "column",
    gap: "12",
+
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
  },
  paymentCardTop: {
    height: 20,