82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { RouteProp, useRoute } from '@react-navigation/native';
|
|
import NavbarBack from 'components/NavbarBack';
|
|
import Navigation from 'components/Navigation';
|
|
import * as React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Text, TouchableOpacity, View } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { PaymentStyle } from '../../payment/ui/style';
|
|
import ModalCard from './ModalCard';
|
|
import ModalPay from './ModalPay';
|
|
import ModalSuccess from './ModalSuccess';
|
|
import PaymentProduct from './PaymentProduct';
|
|
|
|
const PaymentMethod = () => {
|
|
const route = useRoute<RouteProp<any, 'PaymentMethod'>>();
|
|
const packets = route.params?.packets;
|
|
|
|
const [isModalVisible, setModalVisible] = React.useState(false);
|
|
const { t } = useTranslation();
|
|
const [selectedId, setSelectedId] = React.useState<'card' | 'pay' | null>(
|
|
null,
|
|
);
|
|
const [selectedCard, setSelectedCard] = React.useState<
|
|
'click' | 'payme' | null
|
|
>(null);
|
|
const [cardModal, setCardModal] = React.useState(false);
|
|
const [payModal, setPayModal] = React.useState(false);
|
|
const [success, setSuccess] = React.useState(false);
|
|
|
|
const toggleModal = () => setModalVisible(true);
|
|
|
|
React.useEffect(() => {
|
|
if (payModal) {
|
|
const timeout = setTimeout(() => setSuccess(true), 1000);
|
|
return () => clearTimeout(timeout);
|
|
}
|
|
}, [payModal]);
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<View style={{ flex: 1 }}>
|
|
<NavbarBack title={t("To'lov usuli")} />
|
|
<PaymentProduct packet={packets!} />
|
|
<ModalPay
|
|
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}
|
|
/>
|
|
)}
|
|
<TouchableOpacity style={[PaymentStyle.button]} onPress={toggleModal}>
|
|
<Text style={PaymentStyle.btnText}>{t("To'lash")}</Text>
|
|
</TouchableOpacity>
|
|
<Navigation />
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default PaymentMethod;
|