Initial commit
This commit is contained in:
Samandar Turgunboyev
198
src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx
Normal file
198
src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Dimensions, ScrollView, Text, View } from 'react-native';
|
||||
import Svg, { Circle, Path } from 'react-native-svg';
|
||||
import Plane from 'svg/Plane';
|
||||
import { PaymentStyle } from '../../payment/ui/style';
|
||||
|
||||
interface PaymentProductProps {
|
||||
packet: any;
|
||||
}
|
||||
|
||||
const PaymentProduct = ({ packet }: PaymentProductProps) => {
|
||||
const { t } = useTranslation();
|
||||
const screenWidth = Dimensions.get('window').width;
|
||||
const isSmallScreen = screenWidth < 380;
|
||||
const svgWidth = screenWidth * 0.8;
|
||||
console.log(packet);
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={PaymentStyle.containerMethod}
|
||||
contentContainerStyle={{ paddingBottom: 80 }}
|
||||
>
|
||||
<View style={PaymentStyle.cardMethod}>
|
||||
<View style={PaymentStyle.planeContainer}>
|
||||
<View style={{ position: 'relative', width: 200, height: 100 }}>
|
||||
<Svg height="80" width="200">
|
||||
<Circle cx="15" cy="60" r="15" fill="#313133" />
|
||||
<Circle cx="15" cy="60" r="7.5" fill="#3D3C3F" />
|
||||
<Circle cx="15" cy="60" r="3.5" fill="#28A7E8" />
|
||||
<Path
|
||||
d="M 15 60 Q 100 0 185 60"
|
||||
stroke="#8C8A93"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="6"
|
||||
/>
|
||||
<Circle cx="185" cy="60" r="15" fill="#313133" />
|
||||
<Circle cx="185" cy="60" r="7.5" fill="#3D3C3F" />
|
||||
<Circle cx="185" cy="60" r="3.5" fill="#28A7E8" />
|
||||
</Svg>
|
||||
<View style={PaymentStyle.planeIcon}>
|
||||
<Plane width={50} height={50} color="#DCDEE3" />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={PaymentStyle.infoCard}>
|
||||
<View
|
||||
style={[
|
||||
PaymentStyle.info,
|
||||
isSmallScreen
|
||||
? { flexBasis: '48%', alignItems: 'flex-start' }
|
||||
: { flexBasis: '48%', alignItems: 'flex-start' },
|
||||
]}
|
||||
>
|
||||
<Text style={PaymentStyle.titleMethod}>USD</Text>
|
||||
<Text style={PaymentStyle.textMethod}>12.267 UZS</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
PaymentStyle.info,
|
||||
isSmallScreen
|
||||
? { flexBasis: '48%', alignItems: 'flex-end' }
|
||||
: { flexBasis: '48%', alignItems: 'flex-end' },
|
||||
]}
|
||||
>
|
||||
<Text style={PaymentStyle.titleMethod}>Cargo</Text>
|
||||
<Text style={PaymentStyle.textMethod}>12.267 UZS/ kg</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
PaymentStyle.info,
|
||||
isSmallScreen
|
||||
? { flexBasis: '48%', alignItems: 'flex-start' }
|
||||
: { flexBasis: '48%', alignItems: 'flex-start' },
|
||||
]}
|
||||
>
|
||||
<Text style={PaymentStyle.titleMethod}>{t('Yetkazish vaqti')}</Text>
|
||||
<Text style={PaymentStyle.textMethod}>08.25.2025</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
PaymentStyle.info,
|
||||
isSmallScreen
|
||||
? { flexBasis: '48%', alignItems: 'flex-end' }
|
||||
: { flexBasis: '48%', alignItems: 'flex-end' },
|
||||
]}
|
||||
>
|
||||
<Text style={PaymentStyle.titleMethod}>Reys</Text>
|
||||
<Text style={[PaymentStyle.textMethod, { textAlign: 'right' }]}>
|
||||
{packet.packetName}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 30,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#28a8e80c',
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 60,
|
||||
position: 'absolute',
|
||||
left: -15,
|
||||
}}
|
||||
/>
|
||||
<Svg height="1" width={svgWidth}>
|
||||
<Path
|
||||
d={`M 15 0 Q ${svgWidth} 0 ${svgWidth} 0`}
|
||||
stroke="#8C8A93"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="6"
|
||||
/>
|
||||
</Svg>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#28A7E81A',
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 60,
|
||||
position: 'absolute',
|
||||
right: -15,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
{packet.items.map((item: any, index: number) => {
|
||||
const price = Number(item.price);
|
||||
const weight = Number(item.weight);
|
||||
const total = price * weight;
|
||||
|
||||
// formatlash: 0 decimal, so‘m bilan
|
||||
const formattedPrice = price.toFixed(0);
|
||||
const formattedTotal = total.toFixed(0);
|
||||
return (
|
||||
<View key={index} style={{ marginBottom: 15 }}>
|
||||
<View style={PaymentStyle.receiptCard}>
|
||||
<View style={PaymentStyle.rowBetween}>
|
||||
<Text style={PaymentStyle.itemName}>{item.name}</Text>
|
||||
<Text style={PaymentStyle.track}>
|
||||
{t('Trek ID')}: {item.trackId}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={PaymentStyle.rowBetween}>
|
||||
<Text style={PaymentStyle.weight}>
|
||||
{t('Og’irligi')}: {weight} kg
|
||||
</Text>
|
||||
<Text style={PaymentStyle.price}>
|
||||
1kg * {formattedPrice} {t('so‘m')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={PaymentStyle.rowRight}>
|
||||
<Text style={PaymentStyle.total}>
|
||||
{t('Umumiy narxi')}: {formattedTotal} {t('so‘m')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
<View style={PaymentStyle.infoCard}>
|
||||
<View
|
||||
style={[
|
||||
PaymentStyle.info,
|
||||
isSmallScreen
|
||||
? { flexBasis: '48%', alignItems: 'flex-start' }
|
||||
: { flexBasis: '48%', alignItems: 'flex-start' },
|
||||
]}
|
||||
>
|
||||
<Text style={PaymentStyle.titleMethod}>{t('Umumiy narxi')}</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={[
|
||||
PaymentStyle.info,
|
||||
isSmallScreen
|
||||
? { flexBasis: '48%', alignItems: 'flex-end' }
|
||||
: { flexBasis: '48%', alignItems: 'flex-end' },
|
||||
]}
|
||||
>
|
||||
<Text style={PaymentStyle.titleMethod}>{packet.totalPrice}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentProduct;
|
||||
Reference in New Issue
Block a user