Initial commit
This commit is contained in:
Samandar Turgunboyev
179
src/screens/profile/warehouses/ui/TabsAutoWarehouses.tsx
Normal file
179
src/screens/profile/warehouses/ui/TabsAutoWarehouses.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import Clipboard from '@react-native-clipboard/clipboard';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { authApi } from 'api/auth';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Alert,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
useWindowDimensions,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import Toast from 'react-native-toast-message';
|
||||
import AntDesign from 'react-native-vector-icons/AntDesign';
|
||||
import Copy from 'svg/Copy';
|
||||
import Kitay from 'svg/Ki';
|
||||
|
||||
const TabsAutoWarehouses = () => {
|
||||
const { width: screenWidth } = useWindowDimensions();
|
||||
const scale = screenWidth < 360 ? 0.85 : 1;
|
||||
const cardWidth = screenWidth * 0.95;
|
||||
const { t } = useTranslation();
|
||||
const styles = makeStyles(scale, cardWidth, screenWidth);
|
||||
|
||||
const { data: getMe } = useQuery({
|
||||
queryKey: ['getMe'],
|
||||
queryFn: authApi.getMe,
|
||||
});
|
||||
|
||||
const addressInfo = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'China (Auto)',
|
||||
postCode: '510440',
|
||||
addressInfo: [
|
||||
`收货人: ${getMe?.aviaCargoId}`,
|
||||
'手机号码: 18335530701',
|
||||
'北京市顺义区南法信旭辉空港中心C座',
|
||||
`1004 ${getMe?.aviaCargoId}`,
|
||||
],
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: 'Korea (Auto)',
|
||||
// postCode: '520550',
|
||||
// addressInfo: [
|
||||
// '收件人∶李小龙AT(M312)',
|
||||
// '地址∶深圳市南山区科技园科发路',
|
||||
// '18号AT(M312)',
|
||||
// '电话: 13800008888',
|
||||
// ],
|
||||
// },
|
||||
];
|
||||
|
||||
const handleCopy = (info: string[]) => {
|
||||
if (getMe?.status === 'active') {
|
||||
const textToCopy = info.join('\n');
|
||||
Clipboard.setString(textToCopy);
|
||||
Toast.show({
|
||||
type: 'success',
|
||||
text1: t('Nusxa olingan'),
|
||||
text2: t('Avto manzili nusxalandi!'),
|
||||
position: 'top',
|
||||
visibilityTime: 2000,
|
||||
});
|
||||
} else {
|
||||
Toast.show({
|
||||
type: 'error',
|
||||
text1: t('Xatolik yuz berdi!'),
|
||||
text2: t('Akkaunt faol emas!'),
|
||||
position: 'top',
|
||||
visibilityTime: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={addressInfo}
|
||||
horizontal
|
||||
keyExtractor={item => item.id.toString()}
|
||||
pagingEnabled
|
||||
showsHorizontalScrollIndicator={false}
|
||||
snapToInterval={cardWidth + 10}
|
||||
decelerationRate="fast"
|
||||
renderItem={({ item, index }) => {
|
||||
const isLast = index === addressInfo.length - 1;
|
||||
return (
|
||||
<View style={[styles.card, { marginRight: isLast ? 0 : 10 }]}>
|
||||
<View style={styles.titleCard}>
|
||||
<Kitay width={24 * scale} height={24 * scale} />
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
</View>
|
||||
<View style={styles.infoId}>
|
||||
<View style={{ gap: 4 * scale }}>
|
||||
{item.addressInfo.map((line, idx) => (
|
||||
<Text key={idx} style={styles.infoText}>
|
||||
{line}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => handleCopy(item.addressInfo)}>
|
||||
<Copy color="#28A7E8" width={24 * scale} height={24 * scale} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.postCodeWrapper}>
|
||||
<Text style={styles.postCodeText}>{t('Auto post kodi')}: </Text>
|
||||
<Text style={styles.postCode}>{item.postCode}</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
Clipboard.setString(item.postCode);
|
||||
Alert.alert(t('Nusxa olindi'), t('Pochta kodi nusxalandi!'));
|
||||
}}
|
||||
style={{ marginLeft: 4 * scale }}
|
||||
>
|
||||
<AntDesign
|
||||
name="pushpin"
|
||||
color="red"
|
||||
size={16 * scale}
|
||||
style={{ transform: [{ rotateY: '180deg' }] }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const makeStyles = (scale: number, cardWidth: number, screenWidth: number) =>
|
||||
StyleSheet.create({
|
||||
card: {
|
||||
height: 220 * scale,
|
||||
width: cardWidth,
|
||||
backgroundColor: '#28a8e82c',
|
||||
borderRadius: 12 * scale,
|
||||
padding: 15 * scale,
|
||||
gap: 10 * scale,
|
||||
},
|
||||
titleCard: {
|
||||
flexDirection: 'row',
|
||||
gap: 8 * scale,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20 * scale,
|
||||
fontWeight: '600',
|
||||
color: '#101623CC',
|
||||
},
|
||||
infoId: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginVertical: 8 * scale,
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 16 * scale,
|
||||
color: '#28A7E8',
|
||||
},
|
||||
postCodeWrapper: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
postCodeText: {
|
||||
fontSize: 16 * scale,
|
||||
color: '#000000',
|
||||
fontWeight: '500',
|
||||
},
|
||||
postCode: {
|
||||
fontSize: 16 * scale,
|
||||
color: '#28A7E8',
|
||||
fontWeight: '400',
|
||||
marginLeft: 4 * scale,
|
||||
},
|
||||
});
|
||||
|
||||
export default TabsAutoWarehouses;
|
||||
191
src/screens/profile/warehouses/ui/TabsAviaWarehouses.tsx
Normal file
191
src/screens/profile/warehouses/ui/TabsAviaWarehouses.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import Clipboard from '@react-native-clipboard/clipboard';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { authApi } from 'api/auth';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Alert,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
useWindowDimensions,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import Toast from 'react-native-toast-message';
|
||||
import AntDesign from 'react-native-vector-icons/AntDesign';
|
||||
import Copy from 'svg/Copy';
|
||||
import Kitay from 'svg/Ki';
|
||||
|
||||
const TabsAviaWarehouses = () => {
|
||||
const { data: getMe, isLoading: getMeLoad } = useQuery({
|
||||
queryKey: ['getMe'],
|
||||
queryFn: authApi.getMe,
|
||||
});
|
||||
|
||||
const addressList = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'China (Avia)',
|
||||
postCode: '510440',
|
||||
addressInfo: [
|
||||
`收货人: ${getMe?.aviaCargoId}`,
|
||||
'手机号码: 18335530701',
|
||||
'北京市顺义区南法信旭辉空港中心C座',
|
||||
`1004 ${getMe?.aviaCargoId}`,
|
||||
],
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: 'Korea (Avia)',
|
||||
// postCode: '510440',
|
||||
// addressInfo: [
|
||||
// '收货人: M312',
|
||||
// '手机号码: 18335530701',
|
||||
// '北京市顺义区南法信旭辉空港中心C座',
|
||||
// '1004 N209',
|
||||
// ],
|
||||
// },
|
||||
];
|
||||
|
||||
const { width: screenWidth } = useWindowDimensions();
|
||||
const scale = screenWidth < 360 ? 0.85 : 1;
|
||||
const cardWidth = screenWidth * 0.95;
|
||||
const styles = makeStyles(scale, cardWidth, screenWidth);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleCopy = (info: string[]) => {
|
||||
if (getMe?.status === 'active') {
|
||||
const textToCopy = info.join('\n');
|
||||
Clipboard.setString(textToCopy);
|
||||
Toast.show({
|
||||
type: 'success',
|
||||
text1: t('Nusxa olingan'),
|
||||
text2: t('Avia manzili nusxalandi!'),
|
||||
position: 'top',
|
||||
visibilityTime: 2000,
|
||||
});
|
||||
} else {
|
||||
Toast.show({
|
||||
type: 'error',
|
||||
text1: t('Xatolik yuz berdi!'),
|
||||
text2: t('Akkaunt faol emas!'),
|
||||
position: 'top',
|
||||
visibilityTime: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
data={addressList}
|
||||
horizontal
|
||||
keyExtractor={item => item.id.toString()}
|
||||
pagingEnabled
|
||||
showsHorizontalScrollIndicator={false}
|
||||
snapToInterval={cardWidth + 10} // +10: marginRight
|
||||
decelerationRate="fast"
|
||||
renderItem={({ item, index }) => {
|
||||
const isLast = index === addressList.length - 1;
|
||||
return (
|
||||
<View style={[styles.card, { marginRight: isLast ? 0 : 10 }]}>
|
||||
<View style={styles.titleCard}>
|
||||
<Kitay width={24 * scale} height={24 * scale} />
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
</View>
|
||||
<View style={styles.infoId}>
|
||||
<View style={{ gap: 4 * scale }}>
|
||||
{item.addressInfo.map((line, idx) => (
|
||||
<Text key={idx} style={styles.infoText}>
|
||||
{line}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => handleCopy(item.addressInfo)}>
|
||||
<Copy color="#28A7E8" width={24 * scale} height={24 * scale} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.postCodeWrapper}>
|
||||
<Text style={styles.postCodeText}>{t('Avia post kodi')}: </Text>
|
||||
<Text style={styles.postCode}>{item.postCode}</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
Clipboard.setString(item.postCode);
|
||||
Alert.alert(t('Nusxa olindi'), t('Pochta kodi nusxalandi!'));
|
||||
}}
|
||||
style={{ marginLeft: 4 * scale }}
|
||||
>
|
||||
<AntDesign
|
||||
name="pushpin"
|
||||
color="red"
|
||||
size={16 * scale}
|
||||
style={{ transform: [{ rotateY: '180deg' }] }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const makeStyles = (scale: number, cardWidth: number, screenWidth: number) =>
|
||||
StyleSheet.create({
|
||||
container: {
|
||||
height: 200,
|
||||
width: '95%',
|
||||
backgroundColor: '#28a8e82c',
|
||||
margin: 'auto',
|
||||
marginTop: 20,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
gap: 10,
|
||||
},
|
||||
scrollContainer: {
|
||||
marginTop: 20,
|
||||
paddingHorizontal: (screenWidth - cardWidth) / 2,
|
||||
},
|
||||
postCodeWrapper: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
card: {
|
||||
height: 220 * scale,
|
||||
width: cardWidth,
|
||||
backgroundColor: '#28a8e82c',
|
||||
borderRadius: 12 * scale,
|
||||
padding: 15 * scale,
|
||||
gap: 10 * scale,
|
||||
},
|
||||
titleCard: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
color: '#101623CC',
|
||||
},
|
||||
infoId: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 16,
|
||||
color: '#28A7E8',
|
||||
},
|
||||
postCodeText: {
|
||||
fontSize: 16,
|
||||
color: '#000000',
|
||||
fontWeight: '500',
|
||||
},
|
||||
postCode: {
|
||||
fontSize: 16,
|
||||
color: '#28A7E8',
|
||||
fontWeight: '400',
|
||||
},
|
||||
});
|
||||
|
||||
export default TabsAviaWarehouses;
|
||||
123
src/screens/profile/warehouses/ui/Warehouses.tsx
Normal file
123
src/screens/profile/warehouses/ui/Warehouses.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import SingleFileDrop from 'components/FileDrop';
|
||||
import NavbarBack from 'components/NavbarBack';
|
||||
import Navigation from 'components/Navigation';
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import TabsAutoWarehouses from './TabsAutoWarehouses';
|
||||
import TabsAviaWarehouses from './TabsAviaWarehouses';
|
||||
|
||||
interface WarehousesProps {}
|
||||
|
||||
const Warehouses = (props: WarehousesProps) => {
|
||||
const [refreshing, setRefreshing] = React.useState(false);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onRefresh = React.useCallback(() => {
|
||||
setRefreshing(true);
|
||||
setTimeout(() => {
|
||||
setRefreshing(false);
|
||||
}, 1500);
|
||||
}, []);
|
||||
|
||||
const refreshControl = React.useMemo(
|
||||
() => <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />,
|
||||
[refreshing, onRefresh],
|
||||
);
|
||||
|
||||
const contentContainerStyle = React.useMemo(
|
||||
() => ({ paddingBottom: 10 }),
|
||||
[],
|
||||
);
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<NavbarBack title={t('Xitoy omborlari manzili')} />
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
refreshControl={refreshControl}
|
||||
contentContainerStyle={contentContainerStyle}
|
||||
>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.title}>{t('Bizning Xitoy manzilimiz')}</Text>
|
||||
<Text style={styles.text}>
|
||||
{t(
|
||||
'Taobao, pinduoduo, 1688 ,alibaba va Xitoyning istalgan platformasiga kiritish uchun',
|
||||
)}
|
||||
</Text>
|
||||
<TabsAviaWarehouses />
|
||||
<TabsAutoWarehouses />
|
||||
<Text style={styles.title}>
|
||||
{t('Xitoy omborlarimiz manzilini programmaga kiriting')}
|
||||
</Text>
|
||||
<View style={{ gap: 20 }}>
|
||||
<Text style={styles.text}>
|
||||
{t(
|
||||
"Diqqat! Iltimos, Xitoy omborimiz manzilini Xitoy programmalariga kiritganingizdan so'ng, kiritilgan holatdagi skrenshotni bizga yuborib, tekshirtiring",
|
||||
)}
|
||||
</Text>
|
||||
<Text style={styles.text}>
|
||||
{t(
|
||||
"Xitoy ombori manzilini to'g'ri kiritish, mahsulotingiz yo'qolib qolish oldini oladi.",
|
||||
)}
|
||||
</Text>
|
||||
<Text style={styles.text}>
|
||||
{t(
|
||||
"Agar sizda savol tug'ilsa yoki biron narsaga tushunmasangiz bizga murojaat qiling",
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.title}>{t('Skrenshot rasmini yuklang')}</Text>
|
||||
<SingleFileDrop title={t('Rasmni shu yerga yuklang')} />
|
||||
<TouchableOpacity style={styles.button}>
|
||||
<Text style={styles.btnText}>{t('Manzilni tekshirish')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Navigation />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Warehouses;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
card: {
|
||||
width: '95%',
|
||||
marginTop: 20,
|
||||
margin: 'auto',
|
||||
gap: 10,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '500',
|
||||
},
|
||||
text: {
|
||||
fontSize: 18,
|
||||
color: '#000000B2',
|
||||
fontWeight: '400',
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#28A7E8',
|
||||
height: 56,
|
||||
borderRadius: 8,
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
btnText: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user