163 lines
4.0 KiB
JavaScript
163 lines
4.0 KiB
JavaScript
import React from "react";
|
|
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
|
|
const Donasiberhasil = ({ navigation }) => {
|
|
const currentDate = new Date().toLocaleDateString("id-ID", {
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
const donationAmount = 100000;
|
|
const paymentMethod = "Transfer DANA";
|
|
const description = "Pengelolaan Sampah";
|
|
const senderName = "Dina Dwi Anisa";
|
|
const accountName = "Dinas Lingkungan Hidup";
|
|
const transactionId = "DN230512XYZ";
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.card}>
|
|
<MaterialIcons name="check-circle" size={70} color="#2D572C" />
|
|
<Text style={styles.successText}>Terima Kasih!</Text>
|
|
<Text style={styles.subText}>Donasi Anda Telah Berhasil</Text>
|
|
|
|
<View style={styles.separator} />
|
|
|
|
{/* Struk Donasi */}
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>Tanggal</Text>
|
|
<Text style={styles.value}>{currentDate}</Text>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>ID Transaksi</Text>
|
|
<Text style={styles.value}>{transactionId}</Text>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>Nama Pengirim</Text>
|
|
<Text style={styles.value}>{senderName}</Text>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>Akun Tujuan</Text>
|
|
<Text style={styles.value}>{accountName}</Text>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>Jumlah Donasi</Text>
|
|
<Text style={styles.amount}>
|
|
Rp {donationAmount.toLocaleString("id-ID")}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>Tujuan Donasi</Text>
|
|
<Text style={styles.value}>{description}</Text>
|
|
</View>
|
|
<View style={styles.row}>
|
|
<Text style={styles.label}>Metode Pembayaran</Text>
|
|
<Text style={styles.value}>{paymentMethod}</Text>
|
|
</View>
|
|
|
|
<View style={styles.thankYou}>
|
|
<Text style={styles.thankText}>
|
|
Semoga kebaikan Anda membawa berkah bagi banyak orang. 💚
|
|
</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => navigation.navigate("Home")}
|
|
>
|
|
<Text style={styles.buttonText}>Kembali ke Beranda</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Donasiberhasil;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#F2F2F2",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 20,
|
|
},
|
|
card: {
|
|
backgroundColor: "#fff",
|
|
width: "100%",
|
|
borderRadius: 16,
|
|
padding: 25,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
elevation: 5,
|
|
},
|
|
successText: {
|
|
fontSize: 24,
|
|
fontWeight: "bold",
|
|
color: "#2D572C",
|
|
marginTop: 10,
|
|
},
|
|
subText: {
|
|
fontSize: 16,
|
|
color: "#444",
|
|
marginTop: 5,
|
|
marginBottom: 15,
|
|
},
|
|
separator: {
|
|
height: 1,
|
|
width: "100%",
|
|
backgroundColor: "#ccc",
|
|
marginVertical: 20,
|
|
},
|
|
row: {
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
marginBottom: 12,
|
|
},
|
|
label: {
|
|
fontSize: 16,
|
|
color: "#333",
|
|
fontWeight: "500",
|
|
},
|
|
value: {
|
|
fontSize: 16,
|
|
color: "#666",
|
|
textAlign: "right",
|
|
flexShrink: 1,
|
|
marginLeft: 20,
|
|
},
|
|
amount: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
color: "#2D572C",
|
|
},
|
|
thankYou: {
|
|
marginTop: 25,
|
|
marginBottom: 20,
|
|
paddingHorizontal: 10,
|
|
},
|
|
thankText: {
|
|
textAlign: "center",
|
|
color: "#555",
|
|
fontSize: 14,
|
|
fontStyle: "italic",
|
|
},
|
|
button: {
|
|
backgroundColor: "#2D572C",
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 30,
|
|
borderRadius: 10,
|
|
},
|
|
buttonText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
});
|