124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import { useNavigation } from '@react-navigation/native';
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
import { PacketsData } from 'api/packets';
|
|
import AppText from 'components/AppText';
|
|
import React, { useCallback, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { TouchableOpacity, View } from 'react-native';
|
|
import { PaymentStyle } from './style';
|
|
|
|
type WalletStackParamList = {
|
|
PaymentMethod: { packets: PacketsData };
|
|
PaymentQrCode: { packets: PacketsData };
|
|
};
|
|
|
|
type LoginScreenNavigationProp =
|
|
NativeStackNavigationProp<WalletStackParamList>;
|
|
|
|
interface Props {
|
|
packets: PacketsData;
|
|
}
|
|
|
|
const Payment = ({ packets }: Props) => {
|
|
const navigation = useNavigation<LoginScreenNavigationProp>();
|
|
const { t } = useTranslation();
|
|
|
|
const handlePaymentPress = useCallback(
|
|
(item: any) => {
|
|
const isPaid =
|
|
item.paymentStatus === 'PAYED' || item.paymentStatus === 'PENDING';
|
|
navigation.navigate(isPaid ? 'PaymentQrCode' : 'PaymentMethod', {
|
|
packets: item,
|
|
});
|
|
},
|
|
[navigation],
|
|
);
|
|
|
|
const cardContainerStyle = useMemo(
|
|
() => ({
|
|
flexDirection: 'row' as const,
|
|
gap: 10,
|
|
justifyContent: 'center' as const,
|
|
alignItems: 'center' as const,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const badgeStyle = useMemo(
|
|
() => [PaymentStyle.badge, { backgroundColor: '#D32F2F' }],
|
|
[],
|
|
);
|
|
|
|
const renderPaymentCard = useCallback(
|
|
(item: any) => {
|
|
const isPaid =
|
|
item.paymentStatus === 'PAYED' || item.paymentStatus === 'PENDING';
|
|
const cardStyle = [
|
|
PaymentStyle.card,
|
|
{ borderColor: isPaid ? '#4CAF50' : '#D32F2F', borderWidth: 1.5 },
|
|
];
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => handlePaymentPress(item)}
|
|
key={item.id}
|
|
>
|
|
<View style={cardContainerStyle}>
|
|
<View style={cardStyle}>
|
|
<View style={PaymentStyle.cardHeader}>
|
|
<AppText style={PaymentStyle.title}>{item.packetName}</AppText>
|
|
{isPaid ? (
|
|
<AppText style={PaymentStyle.badge}>{t("To'langan")}</AppText>
|
|
) : (
|
|
<AppText style={badgeStyle}>{t("To'lanmagan")}</AppText>
|
|
)}
|
|
</View>
|
|
<View style={PaymentStyle.row}>
|
|
<AppText style={PaymentStyle.infoTitle}>
|
|
{t('Reys raqami')}
|
|
</AppText>
|
|
<AppText
|
|
style={[
|
|
PaymentStyle.text,
|
|
{ width: '60%', textAlign: 'right' },
|
|
]}
|
|
>
|
|
{item.packetName}
|
|
</AppText>
|
|
</View>
|
|
<View style={PaymentStyle.row}>
|
|
<AppText style={PaymentStyle.infoTitle}>
|
|
{t("Mahsulotlar og'irligi")}
|
|
</AppText>
|
|
<AppText style={PaymentStyle.text}>{item.weight}</AppText>
|
|
</View>
|
|
<View style={PaymentStyle.row}>
|
|
<AppText style={PaymentStyle.infoTitle}>
|
|
{t('Mahsulotlar soni')}
|
|
</AppText>
|
|
<AppText style={PaymentStyle.text}>{item.items.length}</AppText>
|
|
</View>
|
|
<View style={PaymentStyle.row}>
|
|
<AppText style={PaymentStyle.infoTitle}>
|
|
{t('Umumiy narxi')}
|
|
</AppText>
|
|
<AppText style={PaymentStyle.text}>{item.totalPrice}</AppText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
},
|
|
[handlePaymentPress, cardContainerStyle, badgeStyle, t],
|
|
);
|
|
|
|
return (
|
|
<View style={PaymentStyle.container}>
|
|
{packets?.data.map(renderPaymentCard)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Payment;
|