92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
import BottomSheetModal from "@/components/common/BottomSheetModal";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
interface CancelPaymentProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export default function CancelPayment({
|
|
visible,
|
|
onClose,
|
|
onCancel,
|
|
}: CancelPaymentProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<BottomSheetModal
|
|
visible={visible}
|
|
onClose={onClose}
|
|
heading={t("payment.cancel-payment")}
|
|
>
|
|
<View style={styles.row}>
|
|
<Text>{t("payment.do-you-want-to-cancel-payment")}</Text>
|
|
</View>
|
|
<View style={styles.buttonsContainer}>
|
|
<TouchableOpacity onPress={onCancel} style={styles.button}>
|
|
<Text style={styles.bottomButtonText}>
|
|
{t("payment.cancel-payment")}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={onClose} style={styles.button}>
|
|
<Text style={styles.bottomButtonText}>
|
|
{t("payment.continue-payment")}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</BottomSheetModal>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
buttonsContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingVertical: 8,
|
|
borderTopWidth: 1,
|
|
borderBottomWidth: 1,
|
|
borderColor: "#D8DDE7",
|
|
},
|
|
bottomButtonText: {
|
|
textAlign: "center",
|
|
},
|
|
button: {
|
|
width: "45%",
|
|
height: 44,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderWidth: 1,
|
|
borderColor: "#E5E9F0",
|
|
borderRadius: 4,
|
|
backgroundColor: "#F3F5F8",
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
gap: 16,
|
|
justifyContent: "space-between",
|
|
},
|
|
secondaryButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
height: 40,
|
|
borderRadius: 4,
|
|
backgroundColor: "#F3F5F8",
|
|
borderWidth: 1,
|
|
borderColor: "#D8DDE7",
|
|
width: 156,
|
|
gap: 8,
|
|
},
|
|
fullButton: {
|
|
width: "100%",
|
|
},
|
|
buttonText: {
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
color: "#252A34",
|
|
},
|
|
});
|