diff --git a/App.tsx b/App.tsx index 3ee9b17..9b09c25 100644 --- a/App.tsx +++ b/App.tsx @@ -214,20 +214,3 @@ export default function App() { ); } - -const styles = StyleSheet.create({ - headerWrap: { flex: 1 }, - header: { - flexDirection: 'row', - alignItems: 'center', - backgroundColor: '#28A7E8', - height: 60, - paddingHorizontal: 12, - }, - headerTitle: { - color: '#fff', - fontSize: 20, - fontWeight: '600', - marginLeft: 8, - }, -}); diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 12974a8..205490e 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,7 +1,5 @@ -// src/components/Layout.tsx import React from 'react'; import { StyleSheet, View } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Navbar from './Navbar'; import Navigation from './Navigation'; @@ -11,13 +9,11 @@ interface LayoutProps { const Layout: React.FC = ({ children }) => { return ( - - - - {children} - - - + + + {children} + + ); }; @@ -30,20 +26,6 @@ const styles = StyleSheet.create({ }, container: { flex: 1, - }, - header: { - height: 60, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#f5f5f5', - }, - content: { - flex: 1, - }, - footer: { - height: 50, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#eee', + backgroundColor: '#fff', }, }); diff --git a/src/components/LayoutTwo.tsx b/src/components/LayoutTwo.tsx index 8cf47b2..ff9fe14 100644 --- a/src/components/LayoutTwo.tsx +++ b/src/components/LayoutTwo.tsx @@ -1,7 +1,5 @@ -// src/components/Layout.tsx import React from 'react'; import { StyleSheet, View } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import NavbarBack from './NavbarBack'; import Navigation from './Navigation'; @@ -12,13 +10,11 @@ interface LayoutProps { const LayoutTwo: React.FC = ({ title, children }) => { return ( - - - - {children} - - - + + + {children} + + ); }; @@ -31,20 +27,6 @@ const styles = StyleSheet.create({ }, container: { flex: 1, - }, - header: { - height: 60, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#f5f5f5', - }, - content: { - flex: 1, - }, - footer: { - height: 50, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#eee', + backgroundColor: '#fff', }, }); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 358482b..b1daed7 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,6 +1,6 @@ import { useNavigation } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { Dimensions, Image, @@ -12,6 +12,7 @@ import { View, } from 'react-native'; import AppLink from 'react-native-app-link'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import Logo from 'screens/../../assets/bootsplash/logo.png'; import Bell from 'svg/Bell'; import Instagram from 'svg/Instagram'; @@ -23,17 +24,9 @@ const isSmallScreen = width < 360; const Navbar = () => { const [browserUrl, setBrowserUrl] = useState(''); + const { top } = useSafeAreaInsets(); const [modalVisible, setModalVisible] = useState(false); const navigation = useNavigation>(); - const iconSizes = useMemo( - () => ({ - telegram: isSmallScreen ? 20 : 24, - instagram: isSmallScreen ? 18 : 22, - facebook: isSmallScreen ? 22 : 26, - bell: isSmallScreen ? 20 : 24, - }), - [], - ); const openTelegram = useCallback(async () => { try { @@ -82,7 +75,7 @@ const Navbar = () => { return ( <> - + CPOST diff --git a/src/components/NavbarBack.tsx b/src/components/NavbarBack.tsx index dd63cb5..30af8cf 100644 --- a/src/components/NavbarBack.tsx +++ b/src/components/NavbarBack.tsx @@ -2,6 +2,7 @@ import { useNavigation } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import * as React from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import ArrowLeft from 'svg/ArrowLeft'; interface NavbarBackProps { @@ -10,8 +11,9 @@ interface NavbarBackProps { const NavbarBack = ({ title }: NavbarBackProps) => { const navigation = useNavigation>(); + const { top } = useSafeAreaInsets(); return ( - + navigation.goBack()}> diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index be3c1a9..29c613b 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -9,6 +9,7 @@ import { TouchableOpacity, View, } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import HomeIcon from 'svg/HomeIcon'; import Passport from 'svg/Passport'; @@ -23,6 +24,7 @@ type RouteName = 'Home' | 'Status' | 'Passports' | 'Wallet' | 'Profile'; const Navigation = () => { const navigation = useNavigation>(); + const { bottom } = useSafeAreaInsets(); const route = useRoute(); const { t } = useTranslation(); const links = useMemo( @@ -84,7 +86,7 @@ const Navigation = () => { ); return ( - + {navItems} ); @@ -95,20 +97,18 @@ const styles = StyleSheet.create({ bottom: 0, width: '100%', height: 70, + backgroundColor: '#fff', }, container: { + width: '100%', height: '100%', backgroundColor: '#fff', + borderColor: '#eee', + borderWidth: 1, borderTopLeftRadius: 20, borderTopRightRadius: 20, flexDirection: 'row', - shadowColor: '#000', - shadowOpacity: 0.1, justifyContent: 'space-around', - shadowOffset: { width: 0, height: -2 }, - shadowRadius: 10, - elevation: 10, - width: '100%', }, links: { justifyContent: 'center', diff --git a/src/screens/passport/createPassport/ui/CreatePassword.tsx b/src/screens/passport/createPassport/ui/CreatePassword.tsx index 065c18a..e83e16e 100644 --- a/src/screens/passport/createPassport/ui/CreatePassword.tsx +++ b/src/screens/passport/createPassport/ui/CreatePassword.tsx @@ -3,8 +3,7 @@ import { useMutation } from '@tanstack/react-query'; import passportApi, { AddPassportPayload } from 'api/passport'; import DatePickerInput from 'components/DatePicker'; import SingleFileDrop from 'components/FileDrop'; -import NavbarBack from 'components/NavbarBack'; -import Navigation from 'components/Navigation'; +import LayoutTwo from 'components/LayoutTwo'; import React, { useEffect, useRef, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; @@ -19,7 +18,6 @@ import { TouchableOpacity, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Calendar from 'svg/Calendar'; import { PassportStyle } from '../../myPassport/ui/styled'; import { CreatePassSchema, CreatePassSchemaType } from '../lib/form'; @@ -107,8 +105,7 @@ const CreatePassword = () => { }); }; return ( - - + { {success && ( )} - - + ); }; diff --git a/src/screens/passport/myPassport/ui/MyPassport.tsx b/src/screens/passport/myPassport/ui/MyPassport.tsx index 14b61c3..a450e27 100644 --- a/src/screens/passport/myPassport/ui/MyPassport.tsx +++ b/src/screens/passport/myPassport/ui/MyPassport.tsx @@ -166,7 +166,7 @@ const styles = StyleSheet.create({ shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, - elevation: 4, + elevation: 2, marginBottom: 20, }, title: { diff --git a/src/screens/passport/myPassport/ui/Passport.tsx b/src/screens/passport/myPassport/ui/Passport.tsx index 647c64e..083c1ad 100644 --- a/src/screens/passport/myPassport/ui/Passport.tsx +++ b/src/screens/passport/myPassport/ui/Passport.tsx @@ -3,6 +3,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { useQuery } from '@tanstack/react-query'; import { authApi } from 'api/auth'; import passportApi from 'api/passport'; +import Layout from 'components/Layout'; import LoadingScreen from 'components/LoadingScreen'; import Navbar from 'components/Navbar'; import Navigation from 'components/Navigation'; @@ -17,7 +18,6 @@ import { TouchableOpacity, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import PassportIcon from 'svg/Passport'; import Plus from 'svg/Plus'; import MyPassport from './MyPassport'; @@ -65,69 +65,59 @@ const Passport = () => { if (passportLoad || getMeLoad || passFetching) { return ( - - - - - - - + + + + + ); } if (isErrorPass) { return ( - - - - - - - + + + + + ); } return ( - - - - - - {t('Passportlarim')} - - {myPassport && myPassport.length === 0 ? ( - - - - - {t("Hali pasport qo'shilmagan")} - - - {t("Yangi pasport qo'shish uchun tugmani bosing")} - - + + + + {t('Passportlarim')} + + {myPassport && myPassport.length === 0 ? ( + + + + + {t("Hali pasport qo'shilmagan")} + + + {t("Yangi pasport qo'shish uchun tugmani bosing")} + - ) : ( - - )} - - - - - {t("Yangi pasport qo'shish")} - - - - - + + ) : ( + + )} + + + + {t("Yangi pasport qo'shish")} + + ); }; diff --git a/src/screens/profile/myProfile/ui/Profile.tsx b/src/screens/profile/myProfile/ui/Profile.tsx index ae18e2d..c2b120d 100644 --- a/src/screens/profile/myProfile/ui/Profile.tsx +++ b/src/screens/profile/myProfile/ui/Profile.tsx @@ -1,9 +1,7 @@ +import Layout from 'components/Layout'; import LoadingScreen from 'components/LoadingScreen'; -import Navbar from 'components/Navbar'; -import Navigation from 'components/Navigation'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { RefreshControl, ScrollView, StyleSheet, View } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; +import { RefreshControl, ScrollView, StyleSheet } from 'react-native'; import ProfileHeader from './ProfileHeader'; import ProfilePages from './ProfilePages'; @@ -43,31 +41,23 @@ const Profile = () => { if (loading) { return ( - - - - - - - + + + ); } return ( - - - - - - - - - - + + + + + + ); }; diff --git a/src/screens/profile/notifications/ui/Notifications.tsx b/src/screens/profile/notifications/ui/Notifications.tsx index f31c2f0..4a15b82 100644 --- a/src/screens/profile/notifications/ui/Notifications.tsx +++ b/src/screens/profile/notifications/ui/Notifications.tsx @@ -1,5 +1,4 @@ -import NavbarBack from 'components/NavbarBack'; -import Navigation from 'components/Navigation'; +import LayoutTwo from 'components/LayoutTwo'; import NoResult from 'components/NoResult'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,9 +8,7 @@ import { StyleSheet, Text, TouchableOpacity, - View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Clock from 'svg/Clock'; import { fakeNotifications, NotificationsData } from '../lib/data'; import NotificationsModal from './NotificationsModal'; @@ -44,43 +41,35 @@ const Notifications = (props: NotificationsProps) => { if (!(fakeNotifications.length > 0)) { return ( - - - - - - - + + + ); } return ( - - - - - {fakeNotifications.map(item => ( - openModal(item)} - style={styles.card} - key={item.id} - > - {item.message} - - - ))} - - - - - + + + {fakeNotifications.map(item => ( + openModal(item)} + style={styles.card} + key={item.id} + > + {item.message} + + + ))} + + + ); }; diff --git a/src/screens/profile/settings/ui/Settings.tsx b/src/screens/profile/settings/ui/Settings.tsx index 8a07d4d..8cfe357 100644 --- a/src/screens/profile/settings/ui/Settings.tsx +++ b/src/screens/profile/settings/ui/Settings.tsx @@ -1,10 +1,8 @@ -import { useNavigation } from '@react-navigation/native'; -import { NativeStackNavigationProp } from '@react-navigation/native-stack'; -import NavbarBack from 'components/NavbarBack'; -import Navigation from 'components/Navigation'; +import LayoutTwo from 'components/LayoutTwo'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { + ActivityIndicator, Image, RefreshControl, ScrollView, @@ -13,28 +11,29 @@ import { TouchableOpacity, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import RU from 'screens/../../assets/bootsplash/RU.png'; import UZ from 'screens/../../assets/bootsplash/UZ.png'; import Check from 'svg/Check'; import { changeLanguage } from 'utils/changeLanguage'; -interface SettingsProps {} - const languages = [ { code: 'uz', label: "O'zbek tili", Icon: UZ }, { code: 'ru', label: 'Rus tili', Icon: RU }, ]; -const Settings = (props: SettingsProps) => { +const Settings = () => { const [refreshing, setRefreshing] = React.useState(false); + const [loadingLang, setLoadingLang] = React.useState(null); const { i18n, t } = useTranslation(); - const navigation = useNavigation>(); - const selectedLang = languages.find(l => l.code === i18n.language); - const handlechangeLanguage = (lang: string) => { - changeLanguage(lang); + const handlechangeLanguage = async (lang: string) => { + try { + setLoadingLang(lang); + await changeLanguage(lang); + } finally { + setLoadingLang(null); + } }; const onRefresh = React.useCallback(() => { @@ -44,46 +43,36 @@ const Settings = (props: SettingsProps) => { }, 1500); }, []); - const refreshControl = React.useMemo( - () => , - [refreshing, onRefresh], - ); - - const contentContainerStyle = React.useMemo( - () => ({ paddingBottom: 10 }), - [], - ); - return ( - - - - - - - {t('select_language')} - - {languages.map(item => ( + + + } + contentContainerStyle={{ paddingBottom: 10 }} + > + + + {t('select_language')} + + {languages.map(item => { + const isSelected = selectedLang?.code === item.code; + const isLoading = loadingLang === item.code; + + return ( handlechangeLanguage(item.code)} + disabled={isLoading} > { > {item.label} @@ -114,64 +98,53 @@ const Settings = (props: SettingsProps) => { style={[ styles.check, { - backgroundColor: - selectedLang?.code === item.code - ? '#28A7E8' - : '#FFFFFF', - borderColor: - selectedLang?.code === item.code - ? '#28A7E8' - : '#383838', + backgroundColor: isSelected ? '#28A7E8' : '#FFFFFF', + borderColor: isSelected ? '#28A7E8' : '#383838', }, ]} > - {selectedLang?.code === item.code && ( - + {isLoading ? ( + + ) : ( + isSelected && )} - ))} - - {/* navigation.navigate('SettingsLock')} - > - Parol o'rnatish - - */} - - - - + ); + })} + + + ); }; export default Settings; const styles = StyleSheet.create({ - container: { - flex: 1, - }, card: { backgroundColor: '#FFFFFF', + borderWidth: 1, + borderColor: '#eee', shadowColor: '#F3FAFF', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, flexDirection: 'row', justifyContent: 'space-between', - padding: 15, - marginTop: 10, + paddingVertical: 15, + paddingHorizontal: 12, borderRadius: 10, + marginTop: 10, alignItems: 'center', + elevation: 1, }, label: { fontWeight: '400', fontSize: 16, }, check: { - width: 20, - height: 20, + width: 24, + height: 24, borderWidth: 1, borderColor: '#383838', borderRadius: 6, diff --git a/src/screens/profile/warehouses/ui/Warehouses.tsx b/src/screens/profile/warehouses/ui/Warehouses.tsx index 4840107..8c5aeef 100644 --- a/src/screens/profile/warehouses/ui/Warehouses.tsx +++ b/src/screens/profile/warehouses/ui/Warehouses.tsx @@ -1,6 +1,5 @@ import SingleFileDrop from 'components/FileDrop'; -import NavbarBack from 'components/NavbarBack'; -import Navigation from 'components/Navigation'; +import LayoutTwo from 'components/LayoutTwo'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { @@ -11,7 +10,6 @@ import { TouchableOpacity, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import TabsAutoWarehouses from './TabsAutoWarehouses'; import TabsAviaWarehouses from './TabsAviaWarehouses'; @@ -38,53 +36,49 @@ const Warehouses = (props: WarehousesProps) => { [], ); return ( - - - - - - {t('Bizning Xitoy manzilimiz')} + + + + {t('Bizning Xitoy manzilimiz')} + + {t( + 'Taobao, pinduoduo, 1688 ,alibaba va Xitoyning istalgan platformasiga kiritish uchun', + )} + + + + + {t('Xitoy omborlarimiz manzilini programmaga kiriting')} + + {t( - 'Taobao, pinduoduo, 1688 ,alibaba va Xitoyning istalgan platformasiga kiritish uchun', + "Diqqat! Iltimos, Xitoy omborimiz manzilini Xitoy programmalariga kiritganingizdan so'ng, kiritilgan holatdagi skrenshotni bizga yuborib, tekshirtiring", )} - - - - {t('Xitoy omborlarimiz manzilini programmaga kiriting')} + + {t( + "Xitoy ombori manzilini to'g'ri kiritish, mahsulotingiz yo'qolib qolish oldini oladi.", + )} + + + {t( + "Agar sizda savol tug'ilsa yoki biron narsaga tushunmasangiz bizga murojaat qiling", + )} - - - {t( - "Diqqat! Iltimos, Xitoy omborimiz manzilini Xitoy programmalariga kiritganingizdan so'ng, kiritilgan holatdagi skrenshotni bizga yuborib, tekshirtiring", - )} - - - {t( - "Xitoy ombori manzilini to'g'ri kiritish, mahsulotingiz yo'qolib qolish oldini oladi.", - )} - - - {t( - "Agar sizda savol tug'ilsa yoki biron narsaga tushunmasangiz bizga murojaat qiling", - )} - - - {t('Skrenshot rasmini yuklang')} - - - {t('Manzilni tekshirish')} - - - - - + {t('Skrenshot rasmini yuklang')} + + + {t('Manzilni tekshirish')} + + + + ); }; diff --git a/src/screens/wallet/payment/lib/data.ts b/src/screens/wallet/payment/lib/data.ts index e0b05e5..f0c57c6 100644 --- a/src/screens/wallet/payment/lib/data.ts +++ b/src/screens/wallet/payment/lib/data.ts @@ -6,7 +6,7 @@ interface PaymentData { weight: string; count: number; totalPrice: string; - status: PaymentStatus; + paymentStatus: PaymentStatus; } export const fakePayments: PaymentData[] = [ @@ -16,7 +16,7 @@ export const fakePayments: PaymentData[] = [ weight: '10kg', count: 5, totalPrice: '78 980 so’m', - status: 'unpaid', + paymentStatus: 'unpaid', }, { id: '2', @@ -24,7 +24,7 @@ export const fakePayments: PaymentData[] = [ weight: '8kg', count: 3, totalPrice: '52 000 so’m', - status: 'paid', + paymentStatus: 'paid', }, { id: '3', @@ -32,7 +32,7 @@ export const fakePayments: PaymentData[] = [ weight: '15kg', count: 7, totalPrice: '100 500 so’m', - status: 'paid', + paymentStatus: 'paid', }, { id: '4', @@ -40,6 +40,6 @@ export const fakePayments: PaymentData[] = [ weight: '12kg', count: 6, totalPrice: '88 200 so’m', - status: 'paid', + paymentStatus: 'paid', }, ]; diff --git a/src/screens/wallet/payment/ui/Wallet.tsx b/src/screens/wallet/payment/ui/Wallet.tsx index 1c55d2c..ad5bf46 100644 --- a/src/screens/wallet/payment/ui/Wallet.tsx +++ b/src/screens/wallet/payment/ui/Wallet.tsx @@ -1,8 +1,7 @@ import { useQuery } from '@tanstack/react-query'; import packetsApi from 'api/packets'; +import Layout from 'components/Layout'; import LoadingScreen from 'components/LoadingScreen'; -import Navbar from 'components/Navbar'; -import Navigation from 'components/Navigation'; import NoResult from 'components/NoResult'; import Pagination from 'components/Pagination'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; @@ -15,7 +14,6 @@ import { TouchableOpacity, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Payment from './Payment'; const Wallet = () => { @@ -94,25 +92,17 @@ const Wallet = () => { if (isLoading || isFetching || isLoadingAvia || isFetchingAvia) { return ( - - - - - - - + + + ); } if (isError || isErrorAvia) { return ( - - - - - - - + + + ); } @@ -121,108 +111,101 @@ const Wallet = () => { (packetsAvia && !(packetsAvia?.data.length > 0)) ) { return ( - - + {t("To'lov")} - - + ); } return ( - - - - - - - - {t("To'lov")} - - + + + + + {t("To'lov")} + + setSelectedType('AVIA')} + > + setSelectedType('AVIA')} > - - AVIA - - - - + + + setSelectedType('AUTO')} + > + setSelectedType('AUTO')} > - - AUTO - - - + AUTO + + - - - - - + - - - - + + + + + + ); }; diff --git a/src/screens/wallet/payment/ui/style.ts b/src/screens/wallet/payment/ui/style.ts index f1dd35b..78ebf6f 100644 --- a/src/screens/wallet/payment/ui/style.ts +++ b/src/screens/wallet/payment/ui/style.ts @@ -59,7 +59,7 @@ export const PaymentStyle = StyleSheet.create({ }, button: { position: 'absolute', - bottom: 70, + // bottom: 70, left: 20, right: 20, height: 56, @@ -86,7 +86,7 @@ export const PaymentStyle = StyleSheet.create({ containerMethod: { width: '95%', alignSelf: 'center', - marginTop: 20, + marginTop: 10, }, cardMethod: { backgroundColor: '#FFFFFF', diff --git a/src/screens/wallet/paymentMethod/ui/ModalCard.tsx b/src/screens/wallet/paymentMethod/ui/ModalCard.tsx index 7da9b4c..c39c72b 100644 --- a/src/screens/wallet/paymentMethod/ui/ModalCard.tsx +++ b/src/screens/wallet/paymentMethod/ui/ModalCard.tsx @@ -14,6 +14,7 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import Check from 'svg/Check'; import Click from 'svg/Click'; import Payme from 'svg/Payme'; @@ -44,6 +45,7 @@ const ModalCard = ({ }: ModalCardViewProps) => { const slideAnim = useRef(new Animated.Value(height)).current; const [load, setLoad] = React.useState(false); + const { bottom } = useSafeAreaInsets(); const [pay, setPay] = useState(''); const { t } = useTranslation(); @@ -109,7 +111,7 @@ const ModalCard = ({ if (!isVisible) return null; return ( - + @@ -217,7 +219,6 @@ const styles = StyleSheet.create({ top: 0, left: 0, right: 0, - bottom: 0, zIndex: 1000, justifyContent: 'flex-end', }, diff --git a/src/screens/wallet/paymentMethod/ui/ModalPay.tsx b/src/screens/wallet/paymentMethod/ui/ModalPay.tsx index 9d478c3..3ed0a4c 100644 --- a/src/screens/wallet/paymentMethod/ui/ModalPay.tsx +++ b/src/screens/wallet/paymentMethod/ui/ModalPay.tsx @@ -10,6 +10,7 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import Check from 'svg/Check'; import CreditCard from 'svg/CreditCard'; import Usd from 'svg/Dollar'; @@ -40,6 +41,7 @@ const ModalPay = ({ }: ModalPayProps) => { const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current; const opacity = useRef(new Animated.Value(0)).current; + const { bottom } = useSafeAreaInsets(); const [load, setLoad] = React.useState(false); const { t } = useTranslation(); useEffect(() => { @@ -99,6 +101,7 @@ const ModalPay = ({ styles.overlay, { opacity: opacity, + bottom, }, ]} > @@ -237,7 +240,6 @@ const styles = StyleSheet.create({ top: 0, left: 0, right: 0, - bottom: 0, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end', zIndex: 30, diff --git a/src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx b/src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx index 2fc2b13..d7d99aa 100644 --- a/src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx +++ b/src/screens/wallet/paymentMethod/ui/PaymentMethod.tsx @@ -1,10 +1,9 @@ import { RouteProp, useRoute } from '@react-navigation/native'; -import NavbarBack from 'components/NavbarBack'; -import Navigation from 'components/Navigation'; +import LayoutTwo from 'components/LayoutTwo'; 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 { Text, TouchableOpacity } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { PaymentStyle } from '../../payment/ui/style'; import ModalCard from './ModalCard'; import ModalPay from './ModalPay'; @@ -14,7 +13,7 @@ import PaymentProduct from './PaymentProduct'; const PaymentMethod = () => { const route = useRoute>(); const packets = route.params?.packets; - + const { bottom } = useSafeAreaInsets(); const [isModalVisible, setModalVisible] = React.useState(false); const { t } = useTranslation(); const [selectedId, setSelectedId] = React.useState<'card' | 'pay' | null>( @@ -37,44 +36,43 @@ const PaymentMethod = () => { }, [payModal]); return ( - - - - - + + + {cardModal && ( + - {cardModal && ( - - )} - {success && ( - - )} - - {t("To'lash")} - - - - + )} + {success && ( + + )} + + {t("To'lash")} + + ); }; diff --git a/src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx b/src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx index 7398cd5..772303b 100644 --- a/src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx +++ b/src/screens/wallet/paymentMethod/ui/PaymentProduct.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { Dimensions, ScrollView, Text, View } from 'react-native'; import Svg, { Circle, Path } from 'react-native-svg'; +import { fakePayments } from 'screens/wallet/payment/lib/data'; import Plane from 'svg/Plane'; import { PaymentStyle } from '../../payment/ui/style'; @@ -14,7 +15,6 @@ const PaymentProduct = ({ packet }: PaymentProductProps) => { const screenWidth = Dimensions.get('window').width; const isSmallScreen = screenWidth < 380; const svgWidth = screenWidth * 0.8; - console.log(packet); return ( { }} /> - {packet.items.map((item: any, index: number) => { + {fakePayments.map((item: any, index: number) => { const price = Number(item.price); const weight = Number(item.weight); - const total = price * weight; + // const total = price * weight; // formatlash: 0 decimal, so‘m bilan const formattedPrice = price.toFixed(0); - const formattedTotal = total.toFixed(0); + // const formattedTotal = total.toFixed(0); return ( @@ -160,7 +160,7 @@ const PaymentProduct = ({ packet }: PaymentProductProps) => { - {t('Umumiy narxi')}: {formattedTotal} {t('so‘m')} + {/* {t('Umumiy narxi')}: {formattedTotal} {t('so‘m')} */} diff --git a/src/screens/wallet/successPayment/ui/PaymentQrCode.tsx b/src/screens/wallet/successPayment/ui/PaymentQrCode.tsx index 32d550f..cac1304 100644 --- a/src/screens/wallet/successPayment/ui/PaymentQrCode.tsx +++ b/src/screens/wallet/successPayment/ui/PaymentQrCode.tsx @@ -1,4 +1,4 @@ -import NavbarBack from 'components/NavbarBack'; +import LayoutTwo from 'components/LayoutTwo'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { @@ -9,7 +9,6 @@ import { Text, View, } from 'react-native'; -import { SafeAreaView } from 'react-native-safe-area-context'; import Svg, { Circle, Path } from 'react-native-svg'; import { PaymentStyle } from 'screens/wallet/payment/ui/style'; import Plane from 'svg/Plane'; @@ -24,8 +23,7 @@ const PaymentQrCode = (props: PaymentQrCodeProps) => { const svgWidth = screenWidth * 0.8; const svgWidthProduct = screenWidth * 1; return ( - - + { - + ); };