added notification

src/screens/wallet/successPayment/ui/PaymentQrCode.tsx

@@ -1,3 +1,6 @@
+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';
@@ -7,21 +10,48 @@ import {
   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';
-import { fakeProducts } from '../lib/data';
 
-interface PaymentQrCodeProps {}
-
-const PaymentQrCode = (props: PaymentQrCodeProps) => {
+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
@@ -60,8 +90,14 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
                   : { flexBasis: '48%', alignItems: 'flex-start' },
               ]}
             >
-              <Text style={PaymentStyle.titleMethod}>USD</Text>
-              <Text style={PaymentStyle.textMethod}>12.267 UZS</Text>
+              {data && (
+                <>
+                  <Text style={PaymentStyle.titleMethod}>{data[0].code}</Text>
+                  <Text style={PaymentStyle.textMethod}>
+                    {data[0].rate} UZS
+                  </Text>
+                </>
+              )}
             </View>
 
             <View
@@ -76,7 +112,7 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
               <Text style={PaymentStyle.textMethod}>12.267 UZS/ kg</Text>
             </View>
 
-            <View
+            {/* <View
               style={[
                 PaymentStyle.info,
                 isSmallScreen
@@ -87,19 +123,21 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
               <Text style={PaymentStyle.titleMethod}>
                 {t('Yetkazish vaqti')}
               </Text>
-              <Text style={PaymentStyle.textMethod}>08.25.2025</Text>
-            </View>
+              <Text style={PaymentStyle.textMethod}>{}</Text>
+            </View> */}
 
             <View
               style={[
                 PaymentStyle.info,
                 isSmallScreen
-                  ? { flexBasis: '48%', alignItems: 'flex-end' }
-                  : { flexBasis: '48%', alignItems: 'flex-end' },
+                  ? { flexBasis: '48%', alignItems: 'flex-start' }
+                  : { flexBasis: '48%', alignItems: 'flex-start' },
               ]}
             >
-              <Text style={PaymentStyle.titleMethod}>Avia-CP</Text>
-              <Text style={PaymentStyle.textMethod}>223</Text>
+              <Text style={PaymentStyle.titleMethod}>Reys</Text>
+              <Text style={[PaymentStyle.textMethod, { textAlign: 'left' }]}>
+                {packets.packetName}
+              </Text>
             </View>
           </View>
           <View
@@ -140,7 +178,7 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
               }}
             />
           </View>
-          {fakeProducts.map((item, index) => (
+          {packets.items.map((item: any, index: number) => (
             <View key={index} style={{ marginBottom: 15 }}>
               <View style={PaymentStyle.receiptCard}>
                 <View style={PaymentStyle.rowBetween}>
@@ -207,9 +245,7 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
                 }}
               >
                 <Image
-                  source={{
-                    uri: 'https://docs.lightburnsoftware.com/legacy/img/QRCode/ExampleCode.png',
-                  }}
+                  source={{ uri: qrUrl }}
                   style={{ width: '100%', height: '100%' }}
                   resizeMode="contain"
                 />
@@ -262,6 +298,45 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => {
           </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>
   );
 };