reza added profile address

3 years ago · b6f5c0b6da
parent df449885cd
commit b6f5c0b6da
9 changed files with 340 additions and 10 deletions
--- a/navigation/index.js
+++ b/navigation/index.js
@ -30,10 +30,13 @@ import ShoppingCart from "../src/screens/ShoppingCart";
 import DeliveryForm from "../src/screens/DeliveryForm";
 import Address from "../src/screens/Address";
 import Profile from "../src/screens/Profile";
+import ProfileBookmark from "../src/screens/Profile/components/ProfileBookmark";
+import ProfileAddress from "../src/screens/Profile/components/ProfileAddress";

 //style
 import fontSize from "../src/constants/fontSize";
 import Colors from "../src/constants/Colors";
+import tw from "tailwind-react-native-classnames";


 const Tab = createBottomTabNavigator();
@ -405,7 +408,7 @@ const Navigation = ({ getStatus, isLogin }) => {
    <NavigationContainer>
      <Stack.Navigator
        // initialRouteName="Root"
-        screenOptions={{ headerShown: false }}
+        screenOptions={{ headerShown: false, contentStyle : {backgroundColor : 'white'} }}
      >
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="QR" component={QR} />
@ -420,7 +423,8 @@ const Navigation = ({ getStatus, isLogin }) => {
        <Stack.Screen name="Contact" component={Contact} />
        <Stack.Screen name="AR" component={AR} />
        <Stack.Screen name="CreateAddress" component={Address} />
-
+        <Stack.Screen name="ProfileAddress" component={ProfileAddress} />
+        <Stack.Screen name="ProfileBookmark" component={ProfileBookmark} />
      </Stack.Navigator>
    </NavigationContainer>
  );
--- a/src/components/BottomSheetComponents/ProfileAddress.js
+++ b/src/components/BottomSheetComponents/ProfileAddress.js
--- a/src/redux/store.js
+++ b/src/redux/store.js
@ -65,7 +65,6 @@ try {
  console.log(e);
 }

-AsyncStorage.clear();

 console.disableYellowBox = true;

--- a/src/screens/Profile/arrow-left.svg
+++ b/src/screens/Profile/arrow-left.svg
@ -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>
--- a/src/screens/Profile/components/List.js
+++ b/src/screens/Profile/components/List.js
@ -5,23 +5,27 @@ import {
  Appearance,
  Platform,
  TouchableOpacity,
+  Dimensions
 } from "react-native";
 import React from "react";
 import { connect } from "react-redux";
 import Svg, { Path, G } from "react-native-svg";
 import { useNavigation } from "@react-navigation/native";

+//components
+
 //style
 import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";

 const ios = Platform.OS === "ios";
+const {height} = Dimensions.get("window");

 const List = ({}) => {
  const navigation = useNavigation();
  const colorScheme = Appearance.getColorScheme();
-  const [dropdown, setDropdown] = React.useState(true);
+
  const pages = [
    {
      icon: (
@ -158,7 +162,7 @@ const List = ({}) => {
        </Svg>
      ),
      name: "لیست علاقه‌مندی‌ها",
-      onPress: () => {},
+      onPress: () => navigation.push('ProfileBookmark'),
    },
    {
      icon: (
@ -192,9 +196,10 @@ const List = ({}) => {
        </Svg>
      ),
      name: "آدرس‌ها",
-      onPress: () => {},
+      onPress: () => navigation.push("ProfileAddress"),
    },
  ];
+
  return (
    <View style={tw(`w-full flex-col mt-8 ${ios ? "items-end" : ""}`)}>
      {pages.map((page, index) => (
--- a/src/screens/Profile/components/ProfileAddress/dots.svg
+++ b/src/screens/Profile/components/ProfileAddress/dots.svg
@ -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>
--- a/src/screens/Profile/components/ProfileAddress/index.js
+++ b/src/screens/Profile/components/ProfileAddress/index.js
@ -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,
+  },
+});
--- a/src/screens/Profile/components/ProfileBookmark/index.js
+++ b/src/screens/Profile/components/ProfileBookmark/index.js
@ -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
--- a/src/screens/Profile/index.js
+++ b/src/screens/Profile/index.js
@ -82,6 +82,7 @@ const styles = StyleSheet.create({
  contentContainerStyle: {
    paddingBottom: 100,
    position: "relative",
+    minHeight: height - 100
  },
  container: {
    width: Dimensions.get("window").width,