290 lines
10 KiB
TypeScript
290 lines
10 KiB
TypeScript
import { useNavigation } from '@react-navigation/native';
|
||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import reference_api from 'api/reference';
|
||
import AppText from 'components/AppText';
|
||
import LayoutTwo from 'components/LayoutTwo';
|
||
import * as React from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
Linking,
|
||
ScrollView,
|
||
StyleSheet,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import AppLink from 'react-native-app-link';
|
||
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>>();
|
||
|
||
const { data, refetch } = useQuery({
|
||
queryKey: ['reference_list'],
|
||
queryFn: () => reference_api.getReference({ cargoType: activeTab }),
|
||
});
|
||
|
||
React.useEffect(() => {
|
||
refetch();
|
||
}, [activeTab]);
|
||
|
||
const openTelegram = React.useCallback(async () => {
|
||
try {
|
||
await AppLink.maybeOpenURL('tg://resolve?domain=cpost_admin', {
|
||
appName: 'Telegram',
|
||
appStoreId: 686449807,
|
||
appStoreLocale: 'us',
|
||
playStoreId: 'org.telegram.messenger',
|
||
});
|
||
} catch (err) {
|
||
Linking.openURL('https://t.me/cpost_admin');
|
||
}
|
||
}, []);
|
||
|
||
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 }}>
|
||
{data &&
|
||
data.map(ref => (
|
||
<View style={styles.cardWhite} key={ref.id}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={styles.titleBlack}>{ref.title}</AppText>
|
||
<AppText style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
{ref.price}$/{ref.unitValue}
|
||
{ref.unit}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={styles.desc}>
|
||
{ref.shortDescription}
|
||
</AppText>
|
||
</View>
|
||
))}
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={styles.titleBlack}>
|
||
{t(
|
||
'Avia pochtada bir maxsulotdan seriyalab olish mumkin emas',
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={styles.desc}>
|
||
{t(
|
||
'(Bu kargo narxini o’sishiga olib keladi. Seriyali buyularni avto kargo orqali olib kelish arzonga tushadi)',
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Yetib kelish vaqti')}
|
||
</AppText>
|
||
<AppText
|
||
style={[
|
||
styles.titleBlack,
|
||
{ fontSize: 16, color: '#28A7E8' },
|
||
]}
|
||
>
|
||
7-10 {t('kun')}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={[styles.desc, { color: '#28A7E8B2' }]}>
|
||
{t(
|
||
'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={styles.titleBlack}>
|
||
{t('Minimal miqdor talab qilinmaydi.')}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={styles.desc}>
|
||
{t(
|
||
"ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<AppText style={[styles.titleBlack, { color: '#FF6363' }]}>
|
||
{t('Muhim!')}
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Filiallargacha yetkazib berish - bepul.')}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={[styles.desc, { color: '#000000' }]}>
|
||
{t('Batafsil')}:{' '}
|
||
<AppText style={{ color: '#28A7E8' }} onPress={openTelegram}>
|
||
@cpost_admin
|
||
</AppText>
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<AppText 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.",
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={[styles.card]}
|
||
onPress={() => navigation.navigate('ListBranches')}
|
||
>
|
||
<AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t("Filiallarimiz ro'yhati ilovada mavjud")}
|
||
</AppText>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
{activeTab === 'AUTO' && (
|
||
<View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
|
||
{data &&
|
||
data.map(ref => (
|
||
<View style={styles.cardWhite} key={ref.id}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={styles.titleBlack}>{ref.title}</AppText>
|
||
<AppText style={[styles.titleBlack, { fontSize: 16 }]}>
|
||
{ref.price}$/{ref.unitValue}
|
||
{ref.unit}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={styles.desc}>
|
||
{ref.shortDescription}
|
||
</AppText>
|
||
</View>
|
||
))}
|
||
<View style={styles.cardWhite}>
|
||
<AppText style={styles.desc}>
|
||
{t(
|
||
'Avto kargoda bir maxsulotdan seriyalab istalgan katta miqdorda olish mumkin. Doimiyko’p yuk oluvchi ijozlar uchun maxsus arzonlashtrilgan narxlarimiz bor',
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Yetib kelish vaqti')}
|
||
</AppText>
|
||
<AppText
|
||
style={[
|
||
styles.titleBlack,
|
||
{ fontSize: 16, color: '#28A7E8' },
|
||
]}
|
||
>
|
||
10-20 {t('kun')}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={[styles.desc, { color: '#28A7E8B2' }]}>
|
||
{t(
|
||
'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<View style={styles.cardWhite}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={styles.titleBlack}>
|
||
{t('Minimal miqdor talab qilinmaydi.')}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={styles.desc}>
|
||
{t(
|
||
"ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<AppText style={[styles.titleBlack, { color: '#FF6363' }]}>
|
||
{t('Muhim!')}
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||
<View style={styles.priceCard}>
|
||
<AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t('Filiallargacha yetkazib berish - bepul.')}
|
||
</AppText>
|
||
</View>
|
||
<AppText style={[styles.desc, { color: '#000000' }]}>
|
||
{t('Batafsil')}:{' '}
|
||
<AppText style={{ color: '#28A7E8' }} onPress={openTelegram}>
|
||
@cpost_admin
|
||
</AppText>
|
||
</AppText>
|
||
</View>
|
||
<View style={[styles.card]}>
|
||
<AppText 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.",
|
||
)}
|
||
</AppText>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={[styles.card]}
|
||
onPress={() => navigation.navigate('ListBranches')}
|
||
>
|
||
<AppText style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||
{t("Filiallarimiz ro'yhati ilovada mavjud")}
|
||
</AppText>
|
||
</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',
|
||
},
|
||
});
|