356 lines
12 KiB
TypeScript
356 lines
12 KiB
TypeScript
import { RouteProp, useRoute } from '@react-navigation/native';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import exchanges_api from 'api/exchanges';
|
||
import LayoutTwo from 'components/LayoutTwo';
|
||
import * as React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
Dimensions,
|
||
Image,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
import Svg, { Circle, Path } from 'react-native-svg';
|
||
import { PaymentStyle } from 'screens/wallet/payment/ui/style';
|
||
import ModalCard from 'screens/wallet/paymentMethod/ui/ModalCard';
|
||
import ModalPay from 'screens/wallet/paymentMethod/ui/ModalPay';
|
||
import ModalSuccess from 'screens/wallet/paymentMethod/ui/ModalSuccess';
|
||
import Plane from 'svg/Plane';
|
||
|
||
const PaymentQrCode = () => {
|
||
const { t } = useTranslation();
|
||
const [selectedId, setSelectedId] = React.useState<'card' | 'pay' | null>(
|
||
null,
|
||
);
|
||
const route = useRoute<RouteProp<any, 'PaymentMethod'>>();
|
||
const packets = route.params?.packets;
|
||
const [selectedCard, setSelectedCard] = React.useState<
|
||
'click' | 'payme' | null
|
||
>(null);
|
||
const { data } = useQuery({
|
||
queryKey: ['exchanges'],
|
||
queryFn: () => exchanges_api.getExchanges(),
|
||
});
|
||
|
||
const { bottom } = useSafeAreaInsets();
|
||
const [isModalVisible, setModalVisible] = React.useState(false);
|
||
const toggleModal = () => setModalVisible(true);
|
||
const [cardModal, setCardModal] = React.useState(false);
|
||
const [payModal, setPayModal] = React.useState(false);
|
||
const [success, setSuccess] = React.useState(false);
|
||
|
||
const screenWidth = Dimensions.get('window').width;
|
||
const isSmallScreen = screenWidth < 380;
|
||
const svgWidth = screenWidth * 0.8;
|
||
const svgWidthProduct = screenWidth * 1;
|
||
|
||
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
|
||
packets.qrCode,
|
||
)}`;
|
||
|
||
return (
|
||
<LayoutTwo 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' },
|
||
]}
|
||
>
|
||
{data && (
|
||
<>
|
||
<Text style={PaymentStyle.titleMethod}>{data[0].code}</Text>
|
||
<Text style={PaymentStyle.textMethod}>
|
||
{data[0].rate} 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}>{}</Text>
|
||
</View> */}
|
||
|
||
<View
|
||
style={[
|
||
PaymentStyle.info,
|
||
isSmallScreen
|
||
? { flexBasis: '48%', alignItems: 'flex-start' }
|
||
: { flexBasis: '48%', alignItems: 'flex-start' },
|
||
]}
|
||
>
|
||
<Text style={PaymentStyle.titleMethod}>Reys</Text>
|
||
<Text style={[PaymentStyle.textMethod, { textAlign: 'left' }]}>
|
||
{packets.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>
|
||
{packets.items.map((item: any, index: number) => (
|
||
<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: qrUrl }}
|
||
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>
|
||
<ModalPay
|
||
packId={packets.id}
|
||
paymentType={packets.paymentType}
|
||
paymentStatus={packets.paymentStatus}
|
||
isModalVisible={isModalVisible}
|
||
selectedId={selectedId}
|
||
setModalVisible={setModalVisible}
|
||
setSelectedId={setSelectedId}
|
||
cardModal={cardModal}
|
||
setCardModal={setCardModal}
|
||
payModal={payModal}
|
||
setPayModal={setPayModal}
|
||
success={success}
|
||
setSuccess={setSuccess}
|
||
/>
|
||
{cardModal && (
|
||
<ModalCard
|
||
isVisible={cardModal}
|
||
packId={packets.id}
|
||
setIsVisible={setCardModal}
|
||
selectedId={selectedCard}
|
||
setSelectedId={setSelectedCard}
|
||
/>
|
||
)}
|
||
{success && (
|
||
<ModalSuccess
|
||
visible={success}
|
||
setVisible={setSuccess}
|
||
setPayModal={setPayModal}
|
||
/>
|
||
)}
|
||
{packets.paymentStatus !== 'PAYED' && (
|
||
<TouchableOpacity
|
||
style={[PaymentStyle.button, { bottom: bottom + 80 }]}
|
||
onPress={toggleModal}
|
||
>
|
||
<Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
</LayoutTwo>
|
||
);
|
||
};
|
||
|
||
export default PaymentQrCode;
|
||
|
||
const styles = StyleSheet.create({
|
||
cornerStyle: {
|
||
position: 'absolute' as const,
|
||
width: 40,
|
||
height: 40,
|
||
borderTopWidth: 6,
|
||
borderLeftWidth: 6,
|
||
borderColor: '#007AFF',
|
||
},
|
||
});
|