complated

screens/profile/ui/AnnouncementsTab.tsx

@@ -1,7 +1,9 @@
+import PAYME from '@/assets/images/Payme_NEW.png';
 import { useTheme } from '@/components/ThemeContext';
+import { price_calculation } from '@/screens/create-ads/lib/api';
 import { Ionicons } from '@expo/vector-icons';
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import { ResizeMode, Video } from 'expo-av';
 import { useRouter } from 'expo-router';
 import { ArrowLeft, EyeIcon, Megaphone, Plus } from 'lucide-react-native';
@@ -9,18 +11,21 @@ import React, { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   ActivityIndicator,
+  Alert,
   Dimensions,
   FlatList,
   Image,
+  Linking,
   Pressable,
   RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { user_api } from '../lib/api';
+import { MyAdsDataRes } from '../lib/type';
 
 const PAGE_SIZE = 10;
 const { width } = Dimensions.get('window');
@@ -47,8 +52,8 @@ export function AnnouncementsTab() {
   };
 
   const [refreshing, setRefreshing] = useState(false);
-  const [selectedAnnouncement, setSelectedAnnouncement] = useState<any>(null);
-  const [sheetOpen, setSheetOpen] = useState(false);
+  const [selectedAnnouncement, setSelectedAnnouncement] = useState<MyAdsDataRes | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false); const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const { data, isLoading, isError, fetchNextPage, hasNextPage, refetch } = useInfiniteQuery({
     queryKey: ['my_ads'],
@@ -78,12 +83,12 @@ export function AnnouncementsTab() {
     isError: detailError,
   } = useQuery({
     queryKey: ['my_ads_id', selectedAnnouncement?.id],
-    queryFn: () => user_api.my_ads_detail(selectedAnnouncement.id),
+    queryFn: () => user_api.my_ads_detail(selectedAnnouncement?.id!),
     select: (res) => res.data.data,
     enabled: !!selectedAnnouncement && sheetOpen,
   });
 
-  const openSheet = (item: any) => {
+  const openSheet = (item: MyAdsDataRes) => {
     setSelectedAnnouncement(item);
     setSheetOpen(true);
     requestAnimationFrame(() => bottomSheetRef.current?.present());
@@ -125,9 +130,35 @@ export function AnnouncementsTab() {
 
   const formatAmount = (amount: number) => new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
 
+  const { mutate: payment } = useMutation({
+    mutationFn: (body: { return_url: string; adId: number; paymentType: 'payme' | 'referral' }) =>
+      price_calculation.payment(body),
+    onSuccess: async (res, variables) => {
+      if (variables.paymentType === 'payme') {
+        await Linking.openURL(res.data.url);
+        router.push('/profile/my-ads');
+      } else {
+        router.push('/profile/my-ads');
+      }
+    },
+    onError: (err) => {
+      Alert.alert('Xatolik yuz berdi', err.message);
+    },
+  });
+
+  const sendPayment = ({ type, id }: { id: number, type: 'payme' | 'referral' }) => {
+    payment({
+      adId: id,
+      paymentType: type,
+      return_url: 'https://infotarget.uz/en/main/dashboard',
+    });
+
+  };
+
+
   if (isLoading) {
     return (
-      <SafeAreaView>
+      <View>
         <View style={styles.topHeader}>
           <Pressable onPress={() => router.push('/profile')}>
             <ArrowLeft color={theme.text} />
@@ -138,7 +169,7 @@ export function AnnouncementsTab() {
           </Pressable>
         </View>
         <ActivityIndicator size={'large'} />
-      </SafeAreaView>
+      </View>
     );
   }
 
@@ -304,6 +335,63 @@ export function AnnouncementsTab() {
             </>
           )}
         </BottomSheetScrollView>
+
+        {detail?.status === 'pending' && (
+          <View style={[styles.footerContainer, { backgroundColor: theme.sheetBg }]}>
+            <TouchableOpacity
+              style={[styles.paymentButton, { backgroundColor: theme.primary }]}
+              onPress={() => {
+                bottomSheetModalRef.current?.present();
+              }}
+            >
+              <Text style={styles.paymentButtonText}>{t("To'lov qilish")}</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </BottomSheetModal>
+
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        index={0}
+        snapPoints={['70%', '95%']}
+        backdropComponent={renderBackdrop}
+        handleIndicatorStyle={{ backgroundColor: '#94a3b8', width: 50 }}
+        backgroundStyle={{ backgroundColor: isDark ? '#0f172a' : '#ffffff' }}
+        enablePanDownToClose
+      >
+        <BottomSheetScrollView
+          style={styles.sheetContent}
+          contentContainerStyle={styles.sheetContentContainer}
+        >
+          <View style={{ padding: 20 }}>
+            <Text style={[styles.sheetTitle, isDark ? styles.darkText : styles.lightText]}>
+              {t("To'lov turini tanlang")}
+            </Text>
+
+            <TouchableOpacity
+              style={[
+                styles.paymentItem,
+                isDark ? styles.darkPaymentItem : styles.lightPaymentItem,
+                { flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' },
+              ]}
+              onPress={() => sendPayment({ id: selectedAnnouncement?.id!, type: 'payme' })}
+            >
+              <Image source={PAYME} style={{ width: 80, height: 80 }} />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[
+                styles.paymentItem,
+                isDark ? styles.darkPaymentItem : styles.lightPaymentItem,
+              ]}
+              onPress={() => sendPayment({ id: selectedAnnouncement?.id!, type: 'referral' })}
+            >
+              <Text style={[styles.paymentText, isDark ? styles.darkText : styles.lightText]}>
+                {t('Referal orqali')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </BottomSheetScrollView>
       </BottomSheetModal>
     </View>
   );
@@ -321,7 +409,17 @@ const styles = StyleSheet.create({
   },
   headerTitle: { fontSize: 18, fontWeight: '700' },
 
-  list: { padding: 16, gap: 12 },
+  sheetContent: { flex: 1 },
+  sheetContentContainer: { paddingBottom: 40 },
+
+  darkText: {
+    color: '#f1f5f9',
+  },
+  lightText: {
+    color: '#0f172a',
+  },
+
+  list: { padding: 16, paddingBottom: 30, gap: 12 },
   card: { borderRadius: 16, padding: 16, gap: 8 },
   cardImage: { width: '100%', height: 160, borderRadius: 12 },
 
@@ -329,6 +427,24 @@ const styles = StyleSheet.create({
   title: { fontSize: 16, fontWeight: '700' },
   desc: { lineHeight: 20 },
 
+  paymentItem: {
+    height: 56,
+    borderRadius: 14,
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 12,
+  },
+  darkPaymentItem: {
+    backgroundColor: '#1e293b',
+  },
+  lightPaymentItem: {
+    backgroundColor: '#f8fafc',
+  },
+  paymentText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+
   footer: { flexDirection: 'row', justifyContent: 'space-between' },
   metaText: {},
   date: {},
@@ -363,6 +479,25 @@ const styles = StyleSheet.create({
   value: { flex: 1 },
   price: { fontWeight: '700' },
 
+  footerContainer: {
+    padding: 16,
+    paddingBottom: 20,
+    borderTopWidth: 1,
+    borderTopColor: '#e2e8f0',
+  },
+  paymentButton: {
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  paymentButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+
   loading: {},
   error: {},
 });