Initial commit
This commit is contained in:
Samandar Turgunboyev
282
src/screens/wallet/successPayment/ui/PaymentQrCode.tsx
Normal file
282
src/screens/wallet/successPayment/ui/PaymentQrCode.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
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',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user