You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
733 lines
20 KiB
733 lines
20 KiB
import React, { useState, useEffect, useCallback } from "react"; |
|
import { |
|
View, |
|
Text, |
|
Image, |
|
StyleSheet, |
|
ImageBackground, |
|
TouchableOpacity, |
|
} from "react-native"; |
|
import SettingsIcon from "../components/SettingsIcon"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { NativeStackNavigationProp } from "@react-navigation/native-stack"; |
|
import { userApi, User } from "../services/api/userApi"; |
|
import { settingApi } from "../services/api/setting"; |
|
import AsyncStorage from "@react-native-async-storage/async-storage"; |
|
import { useFocusEffect } from "@react-navigation/native"; |
|
import BookmarkIcon from "../components/BookmarkIcon"; |
|
import LeftArrowIcon from "../components/DownArrowIcon"; |
|
import { flagMap } from "../utils/flagMap"; |
|
import DocumentApprovedIcon from "../components/DocumentApprovedIcon"; |
|
import PdfDocumentIcon from "../components/PdfDocumentIcon"; |
|
import DocumentClockIcon from "../components/DocumentClockIcon"; |
|
import widthUtils from "../utils/widthUtils"; |
|
type RootStackParamList = { |
|
SettingList: undefined; |
|
Home: undefined; |
|
MyAccount:undefined; |
|
Login:undefined; |
|
}; |
|
|
|
export const ProfileScreen = () => { |
|
const handleLogin = async () => { |
|
navigation.navigate("Login"); |
|
// const data = settingApi.postFirstLogin(221); |
|
// console.log(data); |
|
|
|
// const params = { |
|
// grant_type: "password", |
|
// username: "test", |
|
// password: "string", |
|
// client_id: "2", |
|
// client_secret: "", |
|
// scope: "", |
|
// }; |
|
// const res = await userApi.login(params); |
|
// const token = res.token_type + " " + res.access_token; |
|
// await AsyncStorage.setItem("token", token); |
|
// navigation.navigate("Home"); |
|
}; |
|
|
|
const navigation = |
|
useNavigation<NativeStackNavigationProp<RootStackParamList>>(); |
|
const [userInfo, setUserInfo] = useState<User | null>(null); |
|
|
|
const getUserInfo = async () => { |
|
const res = await userApi.getProfile(); |
|
console.log(res); |
|
setUserInfo(res); |
|
}; |
|
useFocusEffect( |
|
useCallback(() => { |
|
getUserInfo(); |
|
}, []) |
|
); |
|
return ( |
|
<View style={styles.flexColumnContainer1}> |
|
<ImageBackground |
|
source={require("../../assets/img/image_8e319050.png")} |
|
style={styles.timecardWidget} |
|
resizeMode="cover" |
|
> |
|
<View style={styles.flexRowWithContent}> |
|
<Image |
|
source={flagMap.get(userInfo?.country_en)} |
|
style={styles.imageContainerWithText} |
|
/> |
|
<View style={styles.financialInfoContainer}> |
|
<Text style={styles.whiteTextHeading}>{userInfo?.currency}</Text> |
|
<TouchableOpacity |
|
onPress={() => navigation.navigate("SettingList")} |
|
> |
|
<View style={styles.svgContainer1}> |
|
<SettingsIcon size={fontSize(24)} color="white" /> |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.flexColumnContainer}> |
|
<View style={styles.flexContainerWithImageAndText}> |
|
<View style={styles.flexRowWithContent1}> |
|
<Image |
|
source={require("../../assets/img/image_94051480.jpeg")} |
|
style={styles.profileImageCircle} |
|
/> |
|
<View style={styles.customerInfoPanel}> |
|
<View> |
|
<Text style={styles.uniqueHeaderTextStyle}> |
|
{userInfo?.username} |
|
</Text> |
|
<Text style={styles.elegantText}> |
|
ID: {userInfo?.user_id} |
|
</Text> |
|
</View> |
|
<TouchableOpacity style={styles.transactionSummaryBox} onPress={() => navigation.navigate("MyAccount")}> |
|
<View style={styles.svgContainer}> |
|
<BookmarkIcon size={fontSize(24)} /> |
|
</View> |
|
<Text style={styles.soldeTextDisplayStyle}>Solde</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
<View style={styles.gradientCardContainer}> |
|
<ImageBackground |
|
source={require("../../assets/img/image_7dbf30dc.png")} |
|
style={styles.promoCardContainer2} |
|
resizeMode="cover" |
|
> |
|
<View style={styles.promoCardContainer2}> |
|
<View style={styles.flexRowWithContent1}> |
|
<View style={styles.productInfoContainer}> |
|
<Image |
|
source={require("../../assets/img/image_7263ddf4.png")} |
|
style={styles.imageWithTextRatio} |
|
/> |
|
<Text style={styles.goldenItalicHeading}>2</Text> |
|
</View> |
|
<View style={styles.discountSectionContainer}> |
|
<View style={styles.nestedContentContainer}> |
|
{/* <Text style={styles.goldenTextHeading}>40000/50000</Text> */} |
|
</View> |
|
</View> |
|
<View style={styles.productSummaryBlock}> |
|
<Text style={styles.goldenTextHeading}>40000/50000</Text> |
|
<View style={styles.negativeMarginTop}></View> |
|
</View> |
|
</View> |
|
<View style={styles.promoCardContainer}></View> |
|
</View> |
|
</ImageBackground> |
|
</View> |
|
</View> |
|
</ImageBackground> |
|
<View style={styles.verticalCenterImageGallery}> |
|
<TouchableOpacity onPress={handleLogin}> |
|
<Text>登录</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<View style={styles.groupContainer}> |
|
<View style={styles.groupItemList}> |
|
<View style={styles.groupItemTitle}> |
|
<Text style={styles.groupItemTitleText}> |
|
Mes commandes en cours |
|
</Text> |
|
<View style={styles.groupItemTitleTextTout}> |
|
<Text style={styles.groupItemTitleTextTout1}>tout</Text> |
|
<LeftArrowIcon size={fontSize(14)} color="#8f8684" /> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.groupItem}> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentApprovedIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>等待报价</Text> |
|
</View> |
|
|
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<PdfDocumentIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>等待付款</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>运费</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>待发</Text> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.groupItem}> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentApprovedIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>等待报价</Text> |
|
</View> |
|
|
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<PdfDocumentIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>等待付款</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>运费</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>待发</Text> |
|
</View> |
|
</View> |
|
|
|
{/* <View style={styles.groupItem}> |
|
<View style={styles.groupItemContent}> |
|
<View> |
|
</View> |
|
<Text>已经托运</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<Text>已完成</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<Text>已过期</Text> |
|
</View> |
|
</View> */} |
|
</View> |
|
</View> |
|
|
|
<View style={styles.groupContainer}> |
|
<View style={styles.groupItemList}> |
|
<View style={styles.groupItemTitle}> |
|
<Text style={styles.groupItemTitleText}>Outils</Text> |
|
</View> |
|
|
|
<View style={styles.groupItem}> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentApprovedIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>等待报价</Text> |
|
</View> |
|
|
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<PdfDocumentIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>等待付款</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>运费</Text> |
|
</View> |
|
<View style={styles.groupItemContent}> |
|
<View style={styles.groupItemContentIcon}> |
|
<DocumentClockIcon size={fontSize(38)} color="#707070" /> |
|
</View> |
|
<Text style={styles.groupItemContentText}>待发</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
flexColumnContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
backgroundColor: "#f0f0f0", |
|
width: "100%", |
|
}, |
|
timecardWidget: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: widthUtils(273,273).height, |
|
}, |
|
timeContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
height: widthUtils(43,43).height, |
|
paddingTop: 21, |
|
}, |
|
timeContainer2: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
alignSelf: "stretch", |
|
justifyContent: "space-between", |
|
}, |
|
timeContainer: { |
|
display: "flex", |
|
flex: 1, |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
minWidth: 153, |
|
paddingRight: 6, |
|
paddingLeft: 16, |
|
}, |
|
timeDisplayStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(17), |
|
fontWeight: "600", |
|
fontFamily: |
|
"SF Pro, -apple-system, system-ui, BlinkMacSystemFont, sans-serif", |
|
color: "white", |
|
}, |
|
timeDisplayContainer: { |
|
width: widthUtils(10,124).width, |
|
height: widthUtils(10,124).height, |
|
}, |
|
timeDisplayContainer1: { |
|
flex: 1, |
|
width: widthUtils(13,153).width, |
|
height: widthUtils(13,153).height, |
|
}, |
|
flexColumnContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingVertical: 12, |
|
paddingHorizontal: 20, |
|
paddingBottom: 3.5, |
|
}, |
|
flexContainerWithImageAndText: { |
|
display: "flex", |
|
flexDirection: "row", |
|
gap: 8, |
|
alignItems: "flex-start", |
|
justifyContent: "space-between", |
|
}, |
|
flexRowWithContent: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-end", |
|
paddingRight: 10, |
|
paddingTop: 10, |
|
}, |
|
flexRowWithContent1: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
profileImageCircle: { |
|
width: widthUtils(70,70).width, |
|
height: widthUtils(70,70).height, |
|
borderWidth: 0, |
|
borderRadius: 35, |
|
resizeMode: "cover", |
|
}, |
|
customerInfoPanel: { |
|
marginLeft: 15, |
|
}, |
|
uniqueHeaderTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(20), |
|
fontWeight: "400", |
|
fontFamily: "Archivo Black, sans-serif", |
|
color: "white", |
|
}, |
|
elegantText: { |
|
padding: 0, |
|
margin: 0, |
|
marginTop: 6.75, |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
transactionSummaryBox: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: 8, |
|
}, |
|
svgContainer: { |
|
display: "flex", |
|
width: widthUtils(24,24).width, |
|
height: widthUtils(24,24).height, |
|
color: "#ffffff", |
|
marginRight: 8, |
|
}, |
|
soldeTextDisplayStyle: { |
|
padding: 0, |
|
margin: 0, |
|
marginLeft: 3, |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
imageContainerWithText: { |
|
width: widthUtils(16,24).width, |
|
height: widthUtils(16,24).height, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
financialInfoContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginLeft: 3, |
|
}, |
|
whiteTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(16), |
|
fontWeight: "500", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 22, |
|
color: "white", |
|
}, |
|
svgContainer1: { |
|
display: "flex", |
|
width: widthUtils(24,24).width, |
|
height: widthUtils(24,24).height, |
|
marginLeft: 11, |
|
color: "#ffffff", |
|
}, |
|
gradientCardContainer: { |
|
marginTop: 10, |
|
backgroundColor: "#3A3128", |
|
borderRadius: 10, |
|
}, |
|
promoCardContainer2: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: widthUtils(99,99).height, |
|
paddingTop: 8, |
|
paddingRight: 9.5, |
|
paddingBottom: 15, |
|
paddingLeft: 9, |
|
}, |
|
productInfoContainer: { |
|
flexDirection: "row", |
|
alignItems: "flex-start", |
|
justifyContent: "flex-start", |
|
}, |
|
imageWithTextRatio: { |
|
width: widthUtils(23.5,56).width, |
|
height: widthUtils(23.5,56).height, |
|
}, |
|
goldenItalicHeading: { |
|
padding: 0, |
|
paddingBottom: 2.75, |
|
margin: 0, |
|
marginLeft: 1, |
|
fontSize: fontSize(34), |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
lineHeight: 22, |
|
color: "#f8cb7a", |
|
}, |
|
discountSectionContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
marginLeft: 4, |
|
}, |
|
discountAmountContainer: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
}, |
|
discountPercentageTextStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(12), |
|
fontWeight: "900", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
negativeMarginTopDiscountPercentage: { |
|
marginTop: -22, |
|
}, |
|
nestedContentContainer: { |
|
marginTop: -25, |
|
}, |
|
negativeMarginTop2: { |
|
marginTop: -36, |
|
}, |
|
imageContainer2: { |
|
width: widthUtils(36,36).width, |
|
height: widthUtils(36,36).height, |
|
}, |
|
negativeMarginTop1: { |
|
marginTop: -36, |
|
}, |
|
imgStyleF62: { |
|
width: "100%", |
|
height: widthUtils(36,36).height, |
|
}, |
|
discountStatusContainer: { |
|
paddingRight: 7, |
|
paddingLeft: 7, |
|
marginTop: -23, |
|
}, |
|
discountStatusLabel: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(10), |
|
fontWeight: "600", |
|
fontStyle: "italic", |
|
fontFamily: "Segoe UI", |
|
color: "#4e2000", |
|
}, |
|
productSummaryBlock: { |
|
paddingTop: 4, |
|
paddingBottom: 6.5, |
|
marginLeft: 16, |
|
}, |
|
goldenTextHeading: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(13), |
|
fontWeight: "600", |
|
fontFamily: "PingFang SC", |
|
color: "#f8cb7a", |
|
}, |
|
negativeMarginTop: { |
|
marginTop: -0.5, |
|
}, |
|
horizontalLineWidget: { |
|
width: widthUtils(4,235).width, |
|
height: widthUtils(4,235).height, |
|
}, |
|
promoCardContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
height: widthUtils(34,34).height, |
|
marginTop: 6, |
|
}, |
|
promoCardContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-end", |
|
}, |
|
pingfangScTextWhite: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(11), |
|
fontWeight: "400", |
|
fontFamily: "PingFang SC", |
|
lineHeight: 17, |
|
color: "white", |
|
textAlign: "left", |
|
letterSpacing: -0.1, |
|
}, |
|
promoDetailsContainer: { |
|
display: "flex", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "flex-start", |
|
marginTop: -17, |
|
}, |
|
goldenLabel: { |
|
width: "30%", |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(12), |
|
fontWeight: "900", |
|
fontFamily: "MiSans", |
|
lineHeight: 15, |
|
color: "#f5c164", |
|
}, |
|
goldenText: { |
|
width: "70%", |
|
padding: 0, |
|
paddingRight: 24, |
|
paddingLeft: 37, |
|
margin: 0, |
|
fontSize: fontSize(12), |
|
fontWeight: "900", |
|
fontFamily: "MiSans", |
|
lineHeight: 15, |
|
color: "#f5c164", |
|
}, |
|
goldenGradientBox: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
paddingRight: 6, |
|
paddingLeft: 6, |
|
marginLeft: 11, |
|
backgroundColor: "#F5C164", |
|
borderRadius: 50, |
|
}, |
|
featuredText: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: fontSize(11), |
|
fontWeight: "700", |
|
fontFamily: "Source Han Sans CN", |
|
color: "#473c30", |
|
}, |
|
verticalCenterImageGallery: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "center", |
|
paddingTop: 21.5, |
|
paddingRight: 20, |
|
paddingLeft: 20, |
|
}, |
|
cardContainer1: { |
|
display: "flex", |
|
flexDirection: "column", |
|
alignItems: "stretch", |
|
justifyContent: "flex-start", |
|
paddingTop: 14, |
|
paddingRight: 9, |
|
paddingBottom: 14, |
|
paddingLeft: 10, |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
}, |
|
imageContainer: { |
|
height: widthUtils(212,212).height, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
cardContainer: { |
|
paddingTop: 15, |
|
paddingRight: 11, |
|
paddingBottom: 17, |
|
paddingLeft: 11, |
|
marginTop: 20, |
|
backgroundColor: "white", |
|
borderRadius: 10, |
|
}, |
|
imageContainer1: { |
|
width: "100%", |
|
height: widthUtils(228,228).height, |
|
borderWidth: 0, |
|
resizeMode: "cover", |
|
}, |
|
groupContainer: { |
|
padding: 20, |
|
}, |
|
groupItemList: { |
|
width: "100%", |
|
alignItems: "center", |
|
backgroundColor: "white", |
|
padding: 15, |
|
}, |
|
groupItemTitle: { |
|
flexDirection: "row", |
|
width: "100%", |
|
justifyContent: "space-between", |
|
alignItems: "center", |
|
}, |
|
groupItemTitleText: { |
|
fontSize: fontSize(18), |
|
fontWeight: "600", |
|
color: "#000", |
|
}, |
|
groupItemTitleTextTout: { |
|
fontSize: fontSize(16), |
|
fontWeight: "400", |
|
color: "#8f8684", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
groupItemTitleTextTout1: { |
|
marginRight: 3, |
|
fontSize: fontSize(16), |
|
fontWeight: "400", |
|
color: "#8f8684", |
|
flexDirection: "row", |
|
alignItems: "center", |
|
}, |
|
groupItem: { |
|
flexDirection: "row", |
|
flexWrap: "wrap", |
|
width: "100%", |
|
marginTop: 15, |
|
}, |
|
groupItemContent: { |
|
width: "23%", |
|
borderRadius: 8, |
|
marginLeft: 5, |
|
alignItems: "center", |
|
justifyContent: "center", |
|
flexDirection: "column", |
|
}, |
|
groupItemContentText: { |
|
fontSize: fontSize(12), |
|
fontWeight: "400", |
|
color: "#8f8684", |
|
width: "100%", |
|
textAlign: "center", |
|
}, |
|
groupItemContentIcon: { |
|
width: widthUtils(35,40).width, |
|
height: widthUtils(35,40).height, |
|
}, |
|
});
|
|
|