277 lines
10 KiB
TypeScript
277 lines
10 KiB
TypeScript
import { useNavigation } from '@react-navigation/native';
|
||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||
import LayoutTwo from 'components/LayoutTwo';
|
||
import * as React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import Tabs from '../../home/ui/Tabs';
|
||
|
||
interface CargoPricesProps {}
|
||
|
||
const CargoPrices = (props: CargoPricesProps) => {
|
||
const { t } = useTranslation();
|
||
const [activeTab, setActiveTab] = React.useState<'avia' | 'auto'>('avia');
|
||
const navigation = useNavigation<NativeStackNavigationProp<any>>();
|
||
return (
|
||
<LayoutTwo title={t('Kargo narxlari')}>
|
||
<ScrollView style={{ flex: 1 }}>
|
||
<View style={styles.container}>
|
||
<Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
|
||
{activeTab === 'avia' && (
|
||
<View style={{ marginTop: 10, gap: 10, marginBottom: 20 }}>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>
|
||
{t('Oddiy maxsulotlar')}
|
||
</Text>
|
||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
9.2$ /1kg
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.desc}>
|
||
{t('(Katta miqdordagi yuklar kelishuv asosida)')}
|
||
</Text>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>{t('Brend buyumlar')}</Text>
|
||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
12.2$ /1kg
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.desc}>
|
||
{t('(Karobka,dokumentlar bilan birga)')}
|
||
</Text>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>
|
||
{t(
|
||
'Avia pochtada bir maxsulotdan seriyalab olish mumkin emas',
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.desc}>
|
||
{t(
|
||
'(Bu kargo narxini o’sishiga olib keladi. Seriyali buyularni avto kargo orqali olib kelish arzonga tushadi)',
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Yetib kelish vaqti')}
|
||
</Text>
|
||
<Text
|
||
style={[
|
||
styles.titleBlack,
|
||
{ fontSize: 16, color: '#28A7E8' },
|
||
]}
|
||
>
|
||
7-10 {t('kun')}
|
||
</Text>
|
||
</View>
|
||
<Text style={[styles.desc, { color: '#28A7E8B2' }]}>
|
||
{t(
|
||
'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>
|
||
{t('Minimal miqdor talab qilinmaydi.')}
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.desc}>
|
||
{t(
|
||
"ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<Text style={[styles.titleBlack, { color: '#FF6363' }]}>
|
||
{t('Muhim!')}
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Filiallargacha yetkazib berish - bepul.')}
|
||
</Text>
|
||
</View>
|
||
<Text style={[styles.desc, { color: '#000000' }]}>
|
||
{t('Batafsil')}: @CPcargo_admin
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<Text style={[styles.titleBlack, { color: '#000000B2' }]}>
|
||
{t(
|
||
"Agar siz yashayotgan hududda bizning filialimiz mavjud bo'lmasa, o'zingizga eng yaqin bo'lgan filialni tanlab, ro'yhatdan o'tishingiz mumkin.",
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={[styles.card]}
|
||
onPress={() => navigation.navigate('ListBranches')}
|
||
>
|
||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t("Filiallarimiz ro'yhati ilovada mavjud")}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
{activeTab === 'auto' && (
|
||
<View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>0-30 kg</Text>
|
||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
7$ /1kg
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>30-100kg</Text>
|
||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
6.5$ /1kg
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>
|
||
100kg {t('dan boshlab')}
|
||
</Text>
|
||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
6$ /1kg
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<Text style={styles.desc}>
|
||
{t(
|
||
'Avto kargoda bir maxsulotdan seriyalab istalgan katta miqdorda olish mumkin. Doimiyko’p yuk oluvchi ijozlar uchun maxsus arzonlashtrilgan narxlarimiz bor',
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Yetib kelish vaqti')}
|
||
</Text>
|
||
<Text
|
||
style={[
|
||
styles.titleBlack,
|
||
{ fontSize: 16, color: '#28A7E8' },
|
||
]}
|
||
>
|
||
10-20 {t('kun')}
|
||
</Text>
|
||
</View>
|
||
<Text style={[styles.desc, { color: '#28A7E8B2' }]}>
|
||
{t(
|
||
'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={styles.titleBlack}>
|
||
{t('Minimal miqdor talab qilinmaydi.')}
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.desc}>
|
||
{t(
|
||
"ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<Text style={[styles.titleBlack, { color: '#FF6363' }]}>
|
||
{t('Muhim!')}
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Filiallargacha yetkazib berish - bepul.')}
|
||
</Text>
|
||
</View>
|
||
<Text style={[styles.desc, { color: '#000000' }]}>
|
||
{t('Batafsil')}: @CPcargo_admin
|
||
</Text>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<Text style={[styles.titleBlack, { color: '#000000B2' }]}>
|
||
{t(
|
||
"Agar siz yashayotgan hududda bizning filialimiz mavjud bo'lmasa, o'zingizga eng yaqin bo'lgan filialni tanlab, ro'yhatdan o'tishingiz mumkin.",
|
||
)}
|
||
</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={[styles.card]}
|
||
onPress={() => navigation.navigate('ListBranches')}
|
||
>
|
||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t("Filiallarimiz ro'yhati ilovada mavjud")}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
</LayoutTwo>
|
||
);
|
||
};
|
||
|
||
export default CargoPrices;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
marginTop: 10,
|
||
},
|
||
card: {
|
||
width: '95%',
|
||
gap: 5,
|
||
margin: 'auto',
|
||
},
|
||
cardWhite: {
|
||
backgroundColor: '#FFFFFF',
|
||
width: '95%',
|
||
gap: 5,
|
||
margin: 'auto',
|
||
padding: 10,
|
||
borderRadius: 8,
|
||
paddingVertical: 15,
|
||
paddingHorizontal: 12,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 1 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 2,
|
||
|
||
elevation: 1,
|
||
},
|
||
titleBlack: {
|
||
fontSize: 16,
|
||
fontWeight: '500',
|
||
},
|
||
desc: {
|
||
color: '#000000B2',
|
||
fontSize: 14,
|
||
fontWeight: '400',
|
||
},
|
||
priceCard: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
},
|
||
});
|