Initial commit

src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx

@@ -0,0 +1,81 @@
+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;