reza added profile address

master
Reza_ashrafi 3 years ago
parent df449885cd
commit b6f5c0b6da
  1. 8
      navigation/index.js
  2. 0
      src/components/BottomSheetComponents/ProfileAddress.js
  3. 1
      src/redux/store.js
  4. 4
      src/screens/Profile/arrow-left.svg
  5. 11
      src/screens/Profile/components/List.js
  6. 10
      src/screens/Profile/components/ProfileAddress/dots.svg
  7. 303
      src/screens/Profile/components/ProfileAddress/index.js
  8. 12
      src/screens/Profile/components/ProfileBookmark/index.js
  9. 1
      src/screens/Profile/index.js

@ -30,10 +30,13 @@ import ShoppingCart from "../src/screens/ShoppingCart";
import DeliveryForm from "../src/screens/DeliveryForm"; import DeliveryForm from "../src/screens/DeliveryForm";
import Address from "../src/screens/Address"; import Address from "../src/screens/Address";
import Profile from "../src/screens/Profile"; import Profile from "../src/screens/Profile";
import ProfileBookmark from "../src/screens/Profile/components/ProfileBookmark";
import ProfileAddress from "../src/screens/Profile/components/ProfileAddress";
//style //style
import fontSize from "../src/constants/fontSize"; import fontSize from "../src/constants/fontSize";
import Colors from "../src/constants/Colors"; import Colors from "../src/constants/Colors";
import tw from "tailwind-react-native-classnames";
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
@ -405,7 +408,7 @@ const Navigation = ({ getStatus, isLogin }) => {
<NavigationContainer> <NavigationContainer>
<Stack.Navigator <Stack.Navigator
// initialRouteName="Root" // initialRouteName="Root"
screenOptions={{ headerShown: false }} screenOptions={{ headerShown: false, contentStyle : {backgroundColor : 'white'} }}
> >
<Stack.Screen name="Splash" component={Splash} /> <Stack.Screen name="Splash" component={Splash} />
<Stack.Screen name="QR" component={QR} /> <Stack.Screen name="QR" component={QR} />
@ -420,7 +423,8 @@ const Navigation = ({ getStatus, isLogin }) => {
<Stack.Screen name="Contact" component={Contact} /> <Stack.Screen name="Contact" component={Contact} />
<Stack.Screen name="AR" component={AR} /> <Stack.Screen name="AR" component={AR} />
<Stack.Screen name="CreateAddress" component={Address} /> <Stack.Screen name="CreateAddress" component={Address} />
<Stack.Screen name="ProfileAddress" component={ProfileAddress} />
<Stack.Screen name="ProfileBookmark" component={ProfileBookmark} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );

@ -65,7 +65,6 @@ try {
console.log(e); console.log(e);
} }
AsyncStorage.clear();
console.disableYellowBox = true; console.disableYellowBox = true;

@ -1,4 +0,0 @@
<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path id="Vector" d="M7.1,15.84.577,9.32a1.986,1.986,0,0,1,0-2.8L7.1,0" transform="translate(7.902 4.08)" fill="none" stroke="#c6c6c6" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</svg>

Before

Width:  |  Height:  |  Size: 438 B

@ -5,23 +5,27 @@ import {
Appearance, Appearance,
Platform, Platform,
TouchableOpacity, TouchableOpacity,
Dimensions
} from "react-native"; } from "react-native";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Svg, { Path, G } from "react-native-svg"; import Svg, { Path, G } from "react-native-svg";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
//components
//style //style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
const {height} = Dimensions.get("window");
const List = ({}) => { const List = ({}) => {
const navigation = useNavigation(); const navigation = useNavigation();
const colorScheme = Appearance.getColorScheme(); const colorScheme = Appearance.getColorScheme();
const [dropdown, setDropdown] = React.useState(true);
const pages = [ const pages = [
{ {
icon: ( icon: (
@ -158,7 +162,7 @@ const List = ({}) => {
</Svg> </Svg>
), ),
name: "لیست علاقهمندیها", name: "لیست علاقهمندیها",
onPress: () => {}, onPress: () => navigation.push('ProfileBookmark'),
}, },
{ {
icon: ( icon: (
@ -192,9 +196,10 @@ const List = ({}) => {
</Svg> </Svg>
), ),
name: "آدرسها", name: "آدرسها",
onPress: () => {}, onPress: () => navigation.push("ProfileAddress"),
}, },
]; ];
return ( return (
<View style={tw(`w-full flex-col mt-8 ${ios ? "items-end" : ""}`)}> <View style={tw(`w-full flex-col mt-8 ${ios ? "items-end" : ""}`)}>
{pages.map((page, index) => ( {pages.map((page, index) => (

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_more" data-name="vuesax/linear/more" transform="translate(0 24) rotate(-90)">
<g id="more">
<path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(3 10)" fill="#07612c"/>
<path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(17 10)" fill="#07612c"/>
<path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(10 10)" fill="#07612c"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="#07612c" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 707 B

@ -0,0 +1,303 @@
import {
View,
Text,
Pressable,
TouchableOpacity,
Appearance,
ActivityIndicator,
SafeAreaView,
ScrollView,
StyleSheet,
Platform,
Dimensions,
StatusBar,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { userAddress, userFactor } from "../../../../redux/actions";
import Svg, { G, Path } from "react-native-svg";
//components
import Navbar from "../../../../components/Navbar";
import CustomPressable from "../../../../components/Pressable";
//style
import tw from "tailwind-rn";
import Colors from "../../../../constants/Colors";
import fontSize from "../../../../constants/fontSize";
const { height, width } = Dimensions.get("window");
const ProfileAddress = ({
addresses,
update,
getList,
userId,
userAddressId,
getFactorInfo,
loading,
closeBottomSheet,
}) => {
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation();
const Location = ({ address, active }) => {
console.log(address);
return (
<Pressable
style={[
{
backgroundColor:
userAddressId === address?.id
? Colors.theme1[colorScheme].greenCF + "0a"
: Colors.theme1[colorScheme].grayE3 + "44",
borderWidth: 2,
borderColor:
userAddressId === address?.id
? Colors.theme1[colorScheme].greenCF + "aa"
: Colors.theme1[colorScheme].grayE3,
},
tw(
`flex flex-row-reverse items-center w-full px-3 py-2 rounded-md mt-2`
),
]}
onPress={() =>
userAddressId === address?.id
? {}
: update({ userAddressId: address.id, userId })
}
>
<View style={tw("flex flex-1 flex-col mr-2")}>
{active && (
<View
style={tw("w-full flex flex-row-reverse justify-between mb-3")}
>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={{
fontSize: fontSize.xl,
fontFamily: "bold",
color: Colors.theme1[colorScheme].gray20,
}}
>
آدرس انتخابی شما
</Text>
<Text
style={{
fontSize: fontSize.sm,
fontFamily: "regular",
color: Colors.theme1[colorScheme].gray20,
marginRight: 10,
}}
>
فعال
</Text>
</View>
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<G fill="#07612c" data-name="vuesax/linear/more">
<Path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<Path
data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/>
</G>
</Svg>
</View>
)}
<View
style={tw(
`flex w-full ${active ? "flex-col" : "flex-row-reverse"}`
)}
>
<View style={tw("flex flex-col flex-1 mb-4")}>
<Text
style={[
{
fontFamily: "regular",
fontSize: fontSize.tiny,
lineHeight: 22,
},
]}
>
{"آدرس:" + " " + address.address}
</Text>
<Text
style={[
{
marginTop: 4,
fontFamily: "regular",
fontSize: fontSize.tiny,
lineHeight: 22,
},
]}
>
{"نام:" + " " + address.firstName + " " + address.lastName}
</Text>
<Text
style={[
{
marginTop: 4,
fontFamily: "regular",
fontSize: fontSize.tiny,
lineHeight: 22,
},
]}
>
{"کد پستی:" + " " + address.postalCode}
</Text>
<Text
style={[
{
marginTop: 4,
fontFamily: "regular",
fontSize: fontSize.tiny,
lineHeight: 22,
},
]}
>
{"شماره تماس:" + " " + address.cellphone}
</Text>
</View>
{!active && (
<Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<G
fill={Colors.theme1[colorScheme].gray20}
data-name="vuesax/linear/more"
>
<Path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
<Path
data-name="Vector"
d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
/>
</G>
</Svg>
)}
</View>
<CustomPressable
title={"مشاهده روی نقشه"}
backgroundColor={
active
? Colors.theme1[colorScheme].greenCF
: Colors.theme1[colorScheme].gray20 + "66"
}
color={"white"}
border={{ color: "#196EC0", width: 0 }}
width={"100%"}
onPress={() => {}}
/>
</View>
</Pressable>
);
};
React.useEffect(() => {
getFactorInfo({ userId });
getList();
}, []);
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
backgroundColor: "white",
}}
>
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "آدرسها",
bookmark: false,
qr: false,
back: true,
}}
/>
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
<View style={tw("w-full mt-2 px-4")}>
<View style={tw("p-0 m-0 flex flex-col")}>
{addresses.map((address, index) => (
<Location
address={address}
key={index}
active={userAddressId === address?.id}
/>
))}
</View>
</View>
</ScrollView>
<View style={tw("w-full px-4")}>
<TouchableOpacity
style={[
{
backgroundColor: Colors.theme1[colorScheme].greenCF + "05",
borderColor: Colors.theme1[colorScheme].greenCF,
borderWidth: 1.5,
},
tw(
`flex flex-row-reverse self-end justify-center py-3 rounded-md items-center mt-4 mx-auto w-full`
),
]}
onPress={() => navigation.push("CreateAddress")}
>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.lg,
color: Colors.theme1[colorScheme].greenCF,
}}
>
یک آدرس جدید اضافه کنید
</Text>
<Text
style={{
marginTop : 3,
marginRight: 5,
fontSize: fontSize.xl3,
color: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold"
}}
>
+
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const mapStateToProps = (state) => ({
userId: state.user.status?.id,
userAddressId: state.userFactor.info?.userAddressId,
loading: state.userFactor.loading,
addresses: state.userAddress.list,
});
const mapDispatchToProps = {
getFactorInfo: userFactor.info,
update: userFactor.update,
getList: userAddress.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
position: "relative",
minHeight: height - 150,
},
container: {
width: Dimensions.get("window").width,
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 0,
},
});

@ -0,0 +1,12 @@
import { View, Text } from 'react-native'
import React from 'react'
const ProfileBookmark = () => {
return (
<View>
<Text>ProfileBookmark</Text>
</View>
)
}
export default ProfileBookmark

@ -82,6 +82,7 @@ const styles = StyleSheet.create({
contentContainerStyle: { contentContainerStyle: {
paddingBottom: 100, paddingBottom: 100,
position: "relative", position: "relative",
minHeight: height - 100
}, },
container: { container: {
width: Dimensions.get("window").width, width: Dimensions.get("window").width,

Loading…
Cancel
Save