530 lines
14 KiB
TypeScript
530 lines
14 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
SafeAreaView,
|
|
Alert,
|
|
Share,
|
|
Clipboard,
|
|
Platform,
|
|
Linking,
|
|
ActivityIndicator,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import * as FileSystem from "expo-file-system";
|
|
import * as MediaLibrary from "expo-media-library";
|
|
import * as Sharing from "expo-sharing";
|
|
import { Image } from "expo-image";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { RootState } from "@/store"; // Adjust path as needed
|
|
import { updatePaymentStatus } from "@/store/paymentSlice";
|
|
|
|
interface UpiPaymentScreenProps {
|
|
onBack?: () => void;
|
|
onPaymentSuccess?: () => void;
|
|
onPaymentFailure?: () => void;
|
|
}
|
|
|
|
const UpiPaymentScreen: React.FC<UpiPaymentScreenProps> = ({
|
|
onBack,
|
|
onPaymentSuccess,
|
|
onPaymentFailure,
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const paymentOrder = useSelector(
|
|
(state: RootState) => state.payments.paymentOrder
|
|
);
|
|
|
|
useEffect(() => {
|
|
// Check if payment order exists
|
|
if (!paymentOrder) {
|
|
Alert.alert(
|
|
"Error",
|
|
"No payment order found. Please create a payment order first.",
|
|
[{ text: "OK", onPress: onBack }]
|
|
);
|
|
}
|
|
}, [paymentOrder]);
|
|
|
|
// Show loading if no payment data
|
|
if (!paymentOrder) {
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color="#00876F" />
|
|
<Text style={styles.loadingText}>Loading payment details...</Text>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// Format amount with currency symbol
|
|
const formatAmount = (amount: number): string => {
|
|
return `₹${amount.toLocaleString("en-IN")}`;
|
|
};
|
|
|
|
// Extract numeric amount from the amount
|
|
const getNumericAmount = (): string => {
|
|
return paymentOrder.amount.toString();
|
|
};
|
|
|
|
// Check if payment is expired
|
|
const isPaymentExpired = (): boolean => {
|
|
const expiryDate = new Date(paymentOrder.expiry_date);
|
|
const currentDate = new Date();
|
|
return currentDate > expiryDate;
|
|
};
|
|
|
|
// Get formatted expiry time
|
|
const getExpiryTime = (): string => {
|
|
const expiryDate = new Date(paymentOrder.expiry_date);
|
|
return expiryDate.toLocaleString("en-IN");
|
|
};
|
|
|
|
// Generate UPI payment URL from the API response
|
|
const getUpiUrl = (): string => {
|
|
// Use the UPI string from the API response
|
|
const upiString = paymentOrder.ppayment_link;
|
|
|
|
// Extract the UPI URL from the deep link
|
|
const upiMatch = upiString.match(/upi_string=([^&]+)/);
|
|
if (upiMatch) {
|
|
return decodeURIComponent(upiMatch[1]);
|
|
}
|
|
|
|
// Fallback: construct UPI URL manually
|
|
return `upi://pay?pa=${paymentOrder.upi_handle}&am=${paymentOrder.amount}&cu=INR&tr=${paymentOrder.order_id}`;
|
|
};
|
|
|
|
const payUsingUpiApp = async (): Promise<void> => {
|
|
try {
|
|
// Check if payment is expired
|
|
if (isPaymentExpired()) {
|
|
Alert.alert(
|
|
"Payment Expired",
|
|
"This payment order has expired. Please create a new payment order.",
|
|
[{ text: "OK", onPress: onBack }]
|
|
);
|
|
return;
|
|
}
|
|
|
|
// Check if payment is already completed
|
|
if (
|
|
paymentOrder.status === "completed" ||
|
|
paymentOrder.status === "success"
|
|
) {
|
|
Alert.alert(
|
|
"Payment Already Completed",
|
|
"This payment has already been completed.",
|
|
[{ text: "OK", onPress: onPaymentSuccess }]
|
|
);
|
|
return;
|
|
}
|
|
|
|
const upiUrl = getUpiUrl();
|
|
console.log("Opening UPI URL:", upiUrl);
|
|
|
|
// Update payment status to processing
|
|
dispatch(updatePaymentStatus("processing"));
|
|
|
|
// Check if device can handle UPI URLs
|
|
const canOpenUrl = await Linking.canOpenURL(upiUrl);
|
|
|
|
if (canOpenUrl) {
|
|
await Linking.openURL(upiUrl);
|
|
|
|
// Show payment status dialog
|
|
Alert.alert(
|
|
"Payment Initiated",
|
|
"Payment has been initiated. Please complete the payment in your UPI app.",
|
|
[
|
|
{
|
|
text: "Payment Completed",
|
|
onPress: () => {
|
|
dispatch(updatePaymentStatus("completed"));
|
|
onPaymentSuccess?.();
|
|
},
|
|
},
|
|
{
|
|
text: "Payment Failed",
|
|
style: "cancel",
|
|
onPress: () => {
|
|
dispatch(updatePaymentStatus("failed"));
|
|
onPaymentFailure?.();
|
|
},
|
|
},
|
|
]
|
|
);
|
|
} else {
|
|
// Fallback: Show available UPI apps or general share
|
|
Alert.alert(
|
|
"UPI App Required",
|
|
"Please install a UPI-enabled app like PhonePe, Paytm, Google Pay, or BHIM to make payments.",
|
|
[
|
|
{
|
|
text: "Share Payment Details",
|
|
onPress: () => sharePaymentDetails(),
|
|
},
|
|
{ text: "Cancel", style: "cancel" },
|
|
]
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error opening UPI app:", error);
|
|
dispatch(updatePaymentStatus("failed"));
|
|
Alert.alert(
|
|
"Error",
|
|
"Unable to open UPI app. Would you like to share payment details instead?",
|
|
[
|
|
{
|
|
text: "Share Details",
|
|
onPress: () => sharePaymentDetails(),
|
|
},
|
|
{ text: "Cancel", style: "cancel" },
|
|
]
|
|
);
|
|
}
|
|
};
|
|
|
|
const sharePaymentDetails = async (): Promise<void> => {
|
|
try {
|
|
const shareMessage =
|
|
`💰 Payment Request\n\n` +
|
|
`Amount: ${formatAmount(paymentOrder.amount)}\n` +
|
|
`UPI ID: ${paymentOrder.upi_handle}\n` +
|
|
`Order ID: ${paymentOrder.order_id}\n` +
|
|
`Transaction ID: ${paymentOrder.transaction_id}\n` +
|
|
`Expires: ${getExpiryTime()}\n\n` +
|
|
`UPI Link: ${getUpiUrl()}`;
|
|
|
|
await Share.share({
|
|
message: shareMessage,
|
|
title: "UPI Payment Details",
|
|
});
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to share payment details");
|
|
}
|
|
};
|
|
|
|
const copyUpiId = async (): Promise<void> => {
|
|
try {
|
|
await Clipboard.setString(paymentOrder.upi_handle);
|
|
Alert.alert("Copied!", "UPI ID copied to clipboard");
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to copy UPI ID");
|
|
}
|
|
};
|
|
|
|
const shareQR = async (): Promise<void> => {
|
|
try {
|
|
if (await Sharing.isAvailableAsync()) {
|
|
await Share.share({
|
|
message: `Pay ${formatAmount(
|
|
paymentOrder.amount
|
|
)} using this QR code`,
|
|
url: paymentOrder.qr_code_url,
|
|
});
|
|
} else {
|
|
Alert.alert("Error", "Sharing is not available on this device");
|
|
}
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to share QR code");
|
|
}
|
|
};
|
|
|
|
const downloadQR = async (): Promise<void> => {
|
|
try {
|
|
const { status } = await MediaLibrary.requestPermissionsAsync();
|
|
if (status !== "granted") {
|
|
Alert.alert(
|
|
"Permission Required",
|
|
"Please grant permission to save images"
|
|
);
|
|
return;
|
|
}
|
|
|
|
const fileUri =
|
|
FileSystem.documentDirectory + `qr-${paymentOrder.order_id}.png`;
|
|
const downloadResult = await FileSystem.downloadAsync(
|
|
paymentOrder.qr_code_url,
|
|
fileUri
|
|
);
|
|
|
|
if (downloadResult.status === 200) {
|
|
const asset = await MediaLibrary.createAssetAsync(downloadResult.uri);
|
|
await MediaLibrary.createAlbumAsync("Payment QR Codes", asset, false);
|
|
Alert.alert("Success", "QR code saved to gallery");
|
|
} else {
|
|
Alert.alert("Error", "Failed to download QR code");
|
|
}
|
|
} catch (error) {
|
|
Alert.alert("Error", "Failed to download QR code");
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: string): string => {
|
|
switch (status) {
|
|
case "completed":
|
|
case "success":
|
|
return "#00876F";
|
|
case "failed":
|
|
return "#E74C3C";
|
|
case "processing":
|
|
return "#F39C12";
|
|
default:
|
|
return "#6C757D";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity onPress={onBack} style={styles.backButton}>
|
|
<Ionicons name="chevron-back" size={24} color="#253342" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerTitle}>Pay EMI</Text>
|
|
</View>
|
|
|
|
<View style={styles.content}>
|
|
<View style={styles.qrFrame}>
|
|
<View style={styles.amountSection}>
|
|
<Text style={styles.amountLabel}>Amount to be paid</Text>
|
|
<Text style={styles.amount}>
|
|
{formatAmount(paymentOrder.amount)}
|
|
</Text>
|
|
|
|
{/* Payment Status */}
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: getStatusColor(paymentOrder.status) },
|
|
]}
|
|
>
|
|
<Text style={styles.statusText}>
|
|
{paymentOrder.status.toUpperCase()}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.qrCodeContainer}>
|
|
<Image
|
|
source={{ uri: paymentOrder.qr_code_url }}
|
|
style={styles.qrCode}
|
|
contentFit="contain"
|
|
/>
|
|
</View>
|
|
|
|
{/* UPI ID Section */}
|
|
<TouchableOpacity onPress={copyUpiId} style={styles.upiIdSection}>
|
|
<Text style={styles.upiIdText}>{paymentOrder.upi_handle}</Text>
|
|
<Ionicons name="copy-outline" size={16} color="#253342" />
|
|
</TouchableOpacity>
|
|
|
|
{/* Expiry Info */}
|
|
<View style={styles.expirySection}>
|
|
<Text style={styles.expiryLabel}>Expires:</Text>
|
|
<Text style={styles.expiryTime}>{getExpiryTime()}</Text>
|
|
</View>
|
|
|
|
<View style={styles.buttonsContainer}>
|
|
<TouchableOpacity onPress={shareQR} style={styles.secondaryButton}>
|
|
<Ionicons name="share-outline" size={20} color="#253342" />
|
|
<Text style={styles.secondaryButtonText}>Share QR</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
onPress={downloadQR}
|
|
style={styles.secondaryButton}
|
|
>
|
|
<Ionicons name="download-outline" size={20} color="#253342" />
|
|
<Text style={styles.secondaryButtonText}>Download QR</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
onPress={payUsingUpiApp}
|
|
style={[
|
|
styles.primaryButton,
|
|
(isPaymentExpired() || paymentOrder.status === "completed") &&
|
|
styles.disabledButton,
|
|
]}
|
|
disabled={isPaymentExpired() || paymentOrder.status === "completed"}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.primaryButtonText,
|
|
(isPaymentExpired() || paymentOrder.status === "completed") &&
|
|
styles.disabledButtonText,
|
|
]}
|
|
>
|
|
{paymentOrder.status === "completed"
|
|
? "Payment Completed"
|
|
: isPaymentExpired()
|
|
? "Payment Expired"
|
|
: "Pay using UPI app"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#F3F5F8",
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
loadingText: {
|
|
marginTop: 16,
|
|
fontSize: 16,
|
|
color: "#253342",
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
backgroundColor: "#FFFFFF",
|
|
},
|
|
backButton: {
|
|
padding: 8,
|
|
marginRight: 8,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "600",
|
|
color: "#253342",
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 16,
|
|
paddingBottom: 16,
|
|
},
|
|
qrFrame: {
|
|
backgroundColor: "#FCFCFC",
|
|
borderRadius: 8,
|
|
padding: 16,
|
|
alignItems: "center",
|
|
marginTop: 16,
|
|
},
|
|
amountSection: {
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
},
|
|
amountLabel: {
|
|
fontSize: 14,
|
|
color: "#253342",
|
|
textAlign: "center",
|
|
marginBottom: 4,
|
|
},
|
|
amount: {
|
|
fontSize: 20,
|
|
fontWeight: "600",
|
|
color: "#253342",
|
|
textAlign: "center",
|
|
marginBottom: 8,
|
|
},
|
|
statusBadge: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
statusText: {
|
|
fontSize: 12,
|
|
fontWeight: "600",
|
|
color: "#FFFFFF",
|
|
},
|
|
qrCodeContainer: {
|
|
width: 248,
|
|
height: 248,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
},
|
|
qrCode: {
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
upiIdSection: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginBottom: 12,
|
|
padding: 8,
|
|
backgroundColor: "#F3F5F8",
|
|
borderRadius: 4,
|
|
},
|
|
upiIdText: {
|
|
fontSize: 14,
|
|
color: "#253342",
|
|
marginRight: 8,
|
|
fontWeight: "500",
|
|
},
|
|
expirySection: {
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
},
|
|
expiryLabel: {
|
|
fontSize: 12,
|
|
color: "#6C757D",
|
|
marginBottom: 2,
|
|
},
|
|
expiryTime: {
|
|
fontSize: 14,
|
|
color: "#253342",
|
|
fontWeight: "500",
|
|
},
|
|
buttonsContainer: {
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
width: "100%",
|
|
},
|
|
secondaryButton: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 16,
|
|
backgroundColor: "#F3F5F8",
|
|
borderColor: "#D8DDE7",
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
gap: 4,
|
|
},
|
|
secondaryButtonText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
color: "#253342",
|
|
},
|
|
primaryButton: {
|
|
backgroundColor: "#00876F",
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 16,
|
|
borderRadius: 4,
|
|
alignItems: "center",
|
|
},
|
|
primaryButtonText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
color: "#FCFCFC",
|
|
},
|
|
disabledButton: {
|
|
backgroundColor: "#D8DDE7",
|
|
},
|
|
disabledButtonText: {
|
|
color: "#6C757D",
|
|
},
|
|
});
|
|
|
|
export default UpiPaymentScreen;
|