283 lines
9.2 KiB
TypeScript
283 lines
9.2 KiB
TypeScript
import NavbarBack from 'components/NavbarBack';
|
||
import * as React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
Dimensions,
|
||
Image,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
View,
|
||
} from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import Svg, { Circle, Path } from 'react-native-svg';
|
||
import { PaymentStyle } from 'screens/wallet/payment/ui/style';
|
||
import Plane from 'svg/Plane';
|
||
import { fakeProducts } from '../lib/data';
|
||
|
||
interface PaymentQrCodeProps {}
|
||
|
||
const PaymentQrCode = (props: PaymentQrCodeProps) => {
|
||
const { t } = useTranslation();
|
||
const screenWidth = Dimensions.get('window').width;
|
||
const isSmallScreen = screenWidth < 380;
|
||
const svgWidth = screenWidth * 0.8;
|
||
const svgWidthProduct = screenWidth * 1;
|
||
return (
|
||
<SafeAreaView>
|
||
<NavbarBack title={t("To'lov usuli")} />
|
||
<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}>Avia-CP</Text>
|
||
<Text style={PaymentStyle.textMethod}>223</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>
|
||
{fakeProducts.map((item, index) => (
|
||
<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')}: {item.weight}
|
||
</Text>
|
||
<Text style={PaymentStyle.price}>1kg * {item.unitPrice}</Text>
|
||
</View>
|
||
<View style={PaymentStyle.rowRight}>
|
||
<Text style={PaymentStyle.total}>
|
||
{t('Umumiy narxi')}: {item.total} {t('so‘m')}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<Svg height="1" width={svgWidthProduct}>
|
||
<Path
|
||
d={`M 0 0 Q ${svgWidthProduct} 0 ${svgWidthProduct} 0`}
|
||
stroke="#8C8A93"
|
||
strokeWidth="2"
|
||
fill="none"
|
||
strokeDasharray="9"
|
||
/>
|
||
</Svg>
|
||
</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}>100.000.000</Text>
|
||
</View>
|
||
<View
|
||
style={{ alignItems: 'center', marginTop: 10, margin: 'auto' }}
|
||
>
|
||
<View
|
||
style={{
|
||
width: 200,
|
||
height: 200,
|
||
position: 'relative',
|
||
backgroundColor: '#fff',
|
||
padding: 10,
|
||
}}
|
||
>
|
||
<Image
|
||
source={{
|
||
uri: 'https://docs.lightburnsoftware.com/legacy/img/QRCode/ExampleCode.png',
|
||
}}
|
||
style={{ width: '100%', height: '100%' }}
|
||
resizeMode="contain"
|
||
/>
|
||
|
||
{/* Top-left */}
|
||
<View
|
||
style={[
|
||
styles.cornerStyle,
|
||
{ top: 0, left: 0, borderColor: '#0072FF' },
|
||
]}
|
||
/>
|
||
{/* Top-right */}
|
||
<View
|
||
style={[
|
||
styles.cornerStyle,
|
||
{
|
||
top: 0,
|
||
right: 0,
|
||
borderColor: '#0072FF',
|
||
transform: [{ rotate: '90deg' }],
|
||
},
|
||
]}
|
||
/>
|
||
{/* Bottom-left */}
|
||
<View
|
||
style={[
|
||
styles.cornerStyle,
|
||
{
|
||
bottom: 0,
|
||
left: 0,
|
||
borderColor: '#0072FF',
|
||
transform: [{ rotate: '-90deg' }],
|
||
},
|
||
]}
|
||
/>
|
||
{/* Bottom-right */}
|
||
<View
|
||
style={[
|
||
styles.cornerStyle,
|
||
{
|
||
bottom: 0,
|
||
right: 0,
|
||
borderColor: '#007AFF',
|
||
transform: [{ rotate: '180deg' }],
|
||
},
|
||
]}
|
||
/>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
};
|
||
|
||
export default PaymentQrCode;
|
||
|
||
const styles = StyleSheet.create({
|
||
cornerStyle: {
|
||
position: 'absolute' as const,
|
||
width: 40,
|
||
height: 40,
|
||
borderTopWidth: 6,
|
||
borderLeftWidth: 6,
|
||
borderColor: '#007AFF',
|
||
},
|
||
});
|