reza added something

navigation/index.js

@@ -28,6 +28,7 @@ import Contact from "../src/screens/Contact";
 import Tests from "../src/screens/Tests";
 import ShoppingCart from "../src/screens/ShoppingCart";
 import DeliveryForm from "../src/screens/DeliveryForm";
+import Address from "../src/screens/Address";
 
 //style
 import fontSize from "../src/constants/fontSize";
@@ -103,7 +104,7 @@ const BottomTabNavigator = () => {
         }}
       />
       <Tab.Screen
-        name="ShoppingCart"
+        name="ShoppingCartTab"
         component={CARTStackScreen}
         options={{
           title: "سبد خرید",
@@ -378,6 +379,7 @@ const CARTStackScreen = () => {
     <CARTStack.Navigator screenOptions={{ headerShown: false }}>
       <CARTStack.Screen name="ShoppingCart" component={ShoppingCart} />
       <CARTStack.Screen name="DeliveryForm" component={DeliveryForm} />
+      <CARTStack.Screen name="CreateAddress" component={Address} />
     </CARTStack.Navigator>
   );
 }

src/components/CustomTextInput.js

@@ -23,6 +23,7 @@ const FloatingLabelInput = ({
   name,
   value,
   color,
+  placeholder,
   maxLength,
   autoFocus,
   regex,
@@ -34,17 +35,17 @@ const FloatingLabelInput = ({
     labelStyle: {
       fontFamily: "regular",
       top: !isFocused ? "50%" : 1,
-      fontSize: !isFocused ? fontSize.base : fontSize.sm,
+      fontSize: !isFocused ? fontSize.lg : fontSize.sm,
       transform: [{ translateY: -width / 35 }],
-      color: !isFocused ? "#555" : Colors.theme1[colorScheme].greenC8,
+      color: !isFocused ? "#555" : Colors.theme1[colorScheme].green79,
     },
     inputStyle: {
       fontSize: fontSize.lg,
-      color: Colors.theme1[colorScheme].black,
+      color: Colors.theme1[colorScheme].white,
       borderWidth: 1,
       borderColor: isFocused ? Colors.theme1[colorScheme].greenC8 : "#777",
       textAlign: textAlign,
-      fontFamily: "light",
+      fontFamily: "regular",
       fontWeight : "900"
     },
   });
@@ -53,21 +54,23 @@ const FloatingLabelInput = ({
       <Text
         style={[
           styles.labelStyle,
-          tw("px-1 z-10 bg-white absolute right-4 text-center"),
+          tw("px-1 z-10 bg-white absolute right-3 text-center"),
         ]}
+        onPress={() => setIsFocused(true)}
       >
         {label}
       </Text>
       <TextInput
-        style={[styles.inputStyle, tw("rounded-md p-2")]}
+        style={[styles.inputStyle, tw("rounded-md py-2 px-4")]}
         onChangeText={(text) => onChange(name, (text = regex(text)))}
-        placeholder={"09123456789"}
+        placeholder={placeholder}
         onFocus={() => setIsFocused(true)}
         autoFocus={autoFocus}
         underlineColorAndroid={"transparent"}
         maxLength={maxLength}
+        value={value}
         onBlur={() =>
-          value ? setIsFocused(() => false) : setIsFocused(() => false)
+          value ? {} : setIsFocused(() => false)
         }
       />
     </View>

src/redux/actions/index.js

@@ -11,3 +11,4 @@ export { default as faq } from "./faq";
 export { default as file } from "./file";
 export { default as qr } from "./qr";
 export {default as userAddress} from "./userAddress";
+export { default as transport } from "./transport";

src/redux/actions/transport.js

@@ -0,0 +1,17 @@
+import proxy from "../proxy";
+
+const transport = {
+  list:
+    (data = {}) =>
+    async (dispatch) => {
+      await proxy.get("transport/list", data, { dispatch });
+    },
+  set:
+    (data = {}, data2 = {}, data3 = {}) =>
+    async (dispatch) => {
+      await proxy.post("transport/setTransport", data, { dispatch });
+      await proxy.get("userFactor/info", data2, { dispatch });
+    },
+};
+
+export default transport;

src/redux/reducers/index.js

@@ -10,3 +10,4 @@ export { default as userFactor } from "./userFactor";
 export { default as userProduct } from "./userProduct";
 import { default as qr } from "./qr";
 export { default as userAddress } from "./userAddress";
+export { default as transport } from "./transport";

src/redux/reducers/public.js

@@ -14,8 +14,10 @@ const initialState = {
   arList: [],
   blogList: [],
   blog: null,
-  province: null,
+  provinces: [],
-  city: null,
+  cities: [],
+  province: ["استان"],
+  city: ["شهر"],
   departmans: [
     {
       id: 0,
@@ -152,9 +154,21 @@ const publicApi = (state = initialState, action) => {
     case "public/setSubscribe":
       return { ...state, loading: false, error: null, selectedSubscribe: data };
     case "public/province":
-      return { ...state, loading: false, error: null, province: data };
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        province: [...state.province, ...data.map((item) => item.name)],
+        provinces: data,
+      };
     case "public/city":
-      return { ...state, loading: false, error: null, city: data };
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        city: [...data.map((item) => item.name)],
+        cities: data,
+      };
     case "public/selectMenu":
       return { ...state, loading: false, error: null, selectedMenu: data };
     case "public/VOD/homePage":

src/redux/reducers/transport.js

@@ -0,0 +1,25 @@
+const initialState = {
+  loading: false,
+  error: null,
+  list: [],
+};
+export default function transport(state = initialState, action) {
+  let { type, data } = action;
+  switch (type) {
+    case "transport/list":
+      return {
+        ...state,
+        loading: false,
+        list: data,
+        error: null,
+      };
+    case "transport/info":
+      return { ...state, loading: false, error: null};
+    case "transport/loading":
+      return { ...state, loading: true };
+    case "transport/error":
+      return { ...state, loading: false, error: data.message };
+    default:
+      return state;
+  }
+}

src/redux/store.js

@@ -14,6 +14,8 @@ import file from "./reducers/file";
 import userFactor from "./reducers/userFactor";
 import userProduct from "./reducers/userProduct";
 import qr from './reducers/qr';
+import userAddress from "./reducers/userAddress";
+import transport from "./reducers/transport"
 
 const persistConfig = {
   key: "root",
@@ -44,7 +46,9 @@ const store = createStore(
       file,
       userFactor,
       userProduct,
-      qr
+      qr,
+      userAddress,
+      transport,
     })
   ),
   initialState,

src/screens/Address/index.js

@@ -1,12 +1,308 @@
-import { View, Text } from 'react-native'
+import {
-import React from 'react'
+  View,
+  Text,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  StatusBar,
+  Platform,
+  Dimensions,
+  Appearance,
+} from "react-native";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { publicApi, userAddress } from "../../redux/actions";
+import { useNavigation } from "@react-navigation/native";
+import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
+
+//components
+import Navbar from "../../components/Navbar";
+import CustomPressable from "../../components/Pressable";
+import CustomTextInput from "../../components/CustomTextInput";
+import Select from "../../components/Select";
+
+//style
+import tw from "tailwind-rn";
+import Colors from "../../constants/Colors";
+import fontSize from "../../constants/fontSize";
+
+const Address = ({
+  city,
+  province,
+  getCity,
+  getProvince,
+  provinces,
+  cities,
+  createAddress,
+  loading,
+  setPhase,
+  cityLoading,
+}) => {
+  const colorScheme = Appearance.getColorScheme();
+  const navigation = useNavigation();
+
+  const [addressFields, setAddressFields] = useState({});
+  const [mapAddress, setMapAddress] = useState(null);
+
+  useEffect(() => {
+    getProvince();
+  }, []);
+
+  useEffect(() => {
+    // if(provinces?.length > 0){
+    console.log(province);
+    // }
+  }, [province]);
+
+  useEffect(() => {
+    if (addressFields?.provinceId) {
+      getCity({
+        provinceId: provinces.filter(
+          (province) => province.name === addressFields?.provinceId
+        )[0].id,
+      });
+    }
+  }, [addressFields]);
+
+  const onChange = (name, value) => {
+    setAddressFields({ ...addressFields, [name]: value });
+  };
+
+  const submit = () => {
+    const {
+      firstName,
+      lastName,
+      cellphone,
+      phone,
+      address,
+      provinceId,
+      cityId,
+      postalCode,
+    } = addressFields;
+
+    if (!firstName) {
+      return asyncAwesomeAlert("خطا", "نام خود را وارد کنید.", {
+        showCancelButton: false,
+      });
+    }
+    if (!lastName) {
+      return asyncAwesomeAlert("خطا", "نام خانوادگی خود را وارد کنید", {
+        showCancelButton: false,
+      });
+    }
+    if (!cellphone) {
+      return asyncAwesomeAlert("خطا", "شماره موبایل خود را وارد کنید.", {
+        showCancelButton: false,
+      });
+    }
+    if (!phone) {
+      return asyncAwesomeAlert("خطا", "شماره تلفن خود را وارد کنید.", {
+        showCancelButton: false,
+      });
+    }
+    if (!provinceId) {
+      return asyncAwesomeAlert("خطا", "نام استان خود را وارد کنید.", {
+        showCancelButton: false,
+      });
+    }
+    if (!cityId) {
+      return asyncAwesomeAlert("خطا", "نام شهرستان خود را وارد کنید.", {
+        showCancelButton: false,
+      });
+    }
+    if (!postalCode) {
+      return asyncAwesomeAlert("خطا", "کد پستی خود را وارد کنید.", {
+        showCancelButton: false,
+      });
+    }
+    if (!mapAddress) {
+      return asyncAwesomeAlert("خطا", "آدرس خود را از روی نقشه انتخاب کن", {
+        showCancelButton: false,
+      });
+    }
+
+    createAddress({
+      firstName,
+      lastName,
+      cellphone,
+      phone,
+      address: mapAddress,
+      provinceId: provinces.filter(
+        (province) => province.name === provinceId
+      )[0].id,
+      cityId: cities.filter((city) => city.name === cityId)[0]?.id,
+      postalCode,
+      location: null,
+    });
+
+    navigation.goBack();
+  };
+
+  const Header = ({ title, text }) => {
+    return (
+      <View style={tw("flex flex-col mt-2")}>
+        <Text
+          style={{
+            fontFamily: "bold",
+            fontSize: fontSize.lg,
+            color: Colors.theme1[colorScheme].gray20,
+          }}
+        >
+          {title}
+        </Text>
+        <Text
+          style={{
+            fontFamily: "regular",
+            fontSize: fontSize.sm,
+            color: Colors.theme1[colorScheme].gray20 + "aa",
+          }}
+        >
+          {text}
+        </Text>
+      </View>
+    );
+  };
 
-const Address = () => {
   return (
-    <View>
+    <SafeAreaView
-      <Text>Address</Text>
+      style={{
-    </View>
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-  )
+        position: "relative",
-}
+      }}
+    >
+      <Navbar
+        headerOptions={{
+          logo: false,
+          menu: true,
+          hamburgerMenu: false,
+          title: "",
+          bookmark: true,
+          qr: false,
+          back: true,
+        }}
+      />
+      <ScrollView
+        contentContainerStyle={styles.contentContainerStyle}
+        style={styles.container}
+      >
+        <View style={tw("w-full flex flex-col pb-4")}>
+          <Header
+            title="اطلاعات هویتی"
+            text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )"
+          />
+          <CustomTextInput
+            label="نام"
+            placeholder=""
+            textAlign="right"
+            name="firstName"
+            maxlength="40"
+            value={addressFields?.firstName}
+            onChange={(name, value) => onChange(name, value)}
+            autoFocus={false}
+            regex={(val) => val}
+          />
+          <CustomTextInput
+            label="نام خانوادگی"
+            placeholder=""
+            textAlign="right"
+            name="lastName"
+            maxlength="60"
+            value={addressFields?.lastName}
+            onChange={(name, value) => onChange(name, value)}
+            autoFocus={false}
+            regex={(val) => val}
+          />
+          <Header
+            title="شماره تماس"
+            text="( شماره موبایل و شماره تلفن ثابت خود را 
+            به همراه پیش شماره وارد کنید )"
+          />
+          <CustomTextInput
+            label="شماره موبایل"
+            placeholder=""
+            textAlign="left"
+            name="cellphone"
+            maxlength="11"
+            value={addressFields?.cellphone}
+            onChange={(name, value) => onChange(name, value)}
+            autoFocus={false}
+            regex={(val) => val}
+          />
+          <CustomTextInput
+            label="شماره تلفن"
+            placeholder=""
+            textAlign="left"
+            name="phone"
+            maxlength="11"
+            value={addressFields?.phone}
+            onChange={(name, value) => onChange(name, value)}
+            autoFocus={false}
+            regex={(val) => val}
+          />
+          <Header
+            title="آدرس"
+            text="( لطفا نام استان و شهرستان و آدرس
+            خود را با دقت تکمیل نمایید )"
+          />
+          <View style={tw("w-full mt-4")}>
+            <Select
+              defaultValue={province[0]}
+              onChange={(name, value) => onChange(name, value)}
+              options={province}
+              width={"100%"}
+              name="provinceId"
+            />
+          </View>
+          <View style={tw("w-full mt-4")}>
+            <Select
+              defaultValue={city[0]}
+              onChange={(name, value) => onChange(name, value)}
+              options={city}
+              width={"100%"}
+              name="cityId"
+            />
+          </View>
+
+          <CustomPressable
+            title={"ثبت آدرس"}
+            backgroundColor={Colors.theme1[colorScheme].greenCF}
+            color={"white"}
+            border={{ color: "#196EC0", width: 0 }}
+            width={"100%"}
+            onPress={() => navigation.push("Address")}
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 100,
+  },
+  container: {
+    width: Dimensions.get("window").width,
+    backgroundColor: "white",
+    flexDirection: "column",
+    paddingVertical: 5,
+    paddingHorizontal: 16,
+  },
+});
+
+const mapStateToProps = (state) => ({
+  provinces: state.publicApi.provinces,
+  province: state.publicApi.province,
+  cities: state.publicApi.cities,
+  city: state.publicApi.city,
+  loading: state.userAddress.loading,
+  cityLoading: state.publicApi.loading,
+});
+
+const mapDispatchToProps = {
+  getProvince: publicApi.getProvince,
+  getCity: publicApi.getCity,
+  createAddress: userAddress.add,
+};
 
-export default Address;
+export default connect(mapStateToProps, mapDispatchToProps)(Address);

src/screens/DeliveryForm/Address/index.js

@@ -1,12 +1,144 @@
-import { View, Text } from 'react-native'
+import {
-import React from 'react'
+  View,
+  Text,
+  Pressable,
+  TouchableOpacity,
+  Appearance,
+  ActivityIndicator,
+} from "react-native";
+import React from "react";
+import { connect } from "react-redux";
+import { useNavigation } from "@react-navigation/native";
+import { userFactor } from "../../../redux/actions";
+
+//style
+import tw from "tailwind-rn";
+import Colors from "../../../constants/Colors";
+import fontSize from "../../../constants/fontSize";
+
+const Address = ({ addresses, update, userId, userAddressId, loading }) => {
+  const colorScheme = Appearance.getColorScheme();
+  const navigation = useNavigation();
+
+  const Location = ({ address, active }) => {
+    return (
+      <Pressable
+        style={[
+          {
+            backgroundColor:
+              userAddressId === address?.id
+                ? Colors.theme1[colorScheme].greenCF + "15"
+                : Colors.theme1[colorScheme].grayE3 + "44",
+            borderWidth: 2,
+            borderColor:
+              userAddressId === address?.id
+                ? Colors.theme1[colorScheme].greenCF
+                : 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 })
+        }
+      >
+        {loading && userAddressId !== address?.id ? (
+          <ActivityIndicator
+            size="small"
+            color={Colors.theme1[colorScheme].greenC8}
+          />
+        ) : (
+          <View
+            style={[
+              tw("w-5 h-5 rounded-full"),
+              {
+                backgroundColor: active
+                  ? Colors.theme1[colorScheme].greenCF
+                  : "white",
+                borderWidth: userAddressId === address?.id ? 4 : 1,
+                borderColor:
+                  userAddressId === address?.id
+                    ? Colors.theme1[colorScheme].black
+                    : Colors.theme1[colorScheme].gray20 + "33",
+              },
+            ]}
+          ></View>
+        )}
+        <View style={tw("flex flex-1 flex-col mr-2")}>
+          <Text
+            style={[
+              {
+                fontFamily: "bold",
+                fontSize: fontSize.tiny,
+                lineHeight: 22,
+              },
+            ]}
+          >
+            {address.address}
+          </Text>
+        </View>
+      </Pressable>
+    );
+  };
 
-const Address = () => {
   return (
-    <View>
+    <View style={tw("w-full mt-2")}>
-      <Text>Address</Text>
+      <View style={tw("p-0 m-0 flex flex-col")}>
+        {addresses.map((address, index) => (
+          <Location
+            address={address}
+            key={index}
+            active={userAddressId === address?.id}
+          />
+        ))}
+      </View>
+      <TouchableOpacity
+        style={[
+          {
+            backgroundColor: Colors.theme1[colorScheme].grayE3 + "44",
+            borderColor: Colors.theme1[colorScheme].gray2077 + '55',
+            borderWidth: 1,
+          },
+          tw(
+            `flex flex-row-reverse justify-center py-3 rounded-md items-center w-full mt-4`
+          ),
+        ]}
+        onPress={() => navigation.push("CreateAddress")}
+      >
+        <Text
+          style={{
+            fontFamily: "regular",
+            fontSize: fontSize.tiny,
+            color: Colors.theme1[colorScheme].gray2077,
+          }}
+        >
+          یک آدرس جدید اضافه کنید
+        </Text>
+        <Text
+          style={{
+            marginRight: 2,
+            fontSize: fontSize.xl,
+            color: Colors.theme1[colorScheme].gray20,
+          }}
+        >
+          +
+        </Text>
+      </TouchableOpacity>
     </View>
-  )
+  );
-}
+};
+
+const mapStateToProps = (state) => ({
+  userId: state.user.status?.id,
+  userAddressId: state.userFactor.info?.userAddressId,
+  loading: state.userFactor.loading,
+});
+
+const mapDispatchToProps = {
+  update: userFactor.update,
+};
 
-export default Address
+export default connect(mapStateToProps, mapDispatchToProps)(Address);

src/screens/DeliveryForm/PaymentMethod/index.js

@@ -4,7 +4,7 @@ import React from 'react'
 const PaymentMethod = () => {
   return (
     <View>
-      <Text>PaymentMethod</Text>
+      <Text></Text>
     </View>
   )
 }

src/screens/DeliveryForm/TransportDate/index.js

@@ -1,12 +1,80 @@
-import { View, Text } from 'react-native'
+import { View, Text, Pressable, Appearance } from "react-native";
-import React from 'react'
+import React, { useCallback, useState } from "react";
+import { connect } from "react-redux";
 
-const TransportDate = () => {
+//style
+import tw from "tailwind-rn";
+import Colors from "../../../constants/Colors";
+import fontSize from "../../../constants/fontSize";
+
+const TransportDate = ({ transportDate }) => {
+  const colorScheme = Appearance.getColorScheme();
+  const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
+
+  const Time = useCallback(({ time, active }) => {
+    return (
+      <Pressable
+        style={[
+          tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`),
+          {
+            backgroundColor: active
+              ? Colors.theme1[colorScheme].greenCF + "15"
+              : Colors.theme1[colorScheme].grayE3 + "44",
+            borderWidth: 2,
+            borderColor: active
+              ? Colors.theme1[colorScheme].greenCF
+              : Colors.theme1[colorScheme].grayE3,
+          },
+        ]}
+        onPress={() => setActiveDate(time)}
+      >
+        <Text
+          style={{
+            fontFamily: "bold",
+            fontSize: fontSize.lg,
+            color: active
+              ? Colors.theme1[colorScheme].gray20
+              : Colors.theme1[colorScheme].gray20,
+          }}
+        >
+          {time.time}
+        </Text>
+        <Text
+          style={{
+            fontFamily: "bold",
+            fontSize: fontSize.sm,
+            color: active
+              ? Colors.theme1[colorScheme].green20
+              : Colors.theme1[colorScheme].gray20,
+          }}
+        >
+          تکمیل ظرفیت
+        </Text>
+      </Pressable>
+    );
+  }, []);
   return (
-    <View>
+    <View style={tw("mt-0 w-full")}>
-      <Text>TransportDate</Text>
+      <Text
+        style={{
+          fontSize: fontSize.lg,
+          fontFamily: "bold",
+          color: Colors.theme1[colorScheme].green79,
+        }}
+      >
+        زمان ارسال را انتخاب کنید
+      </Text>
+      <View style={tw("p-0 m-0 flex flex-col w-full")}>
+        {transportDate?.times?.map((time, index) => (
+          <Time time={time} key={index} active={time === activeDate} />
+        ))}
+      </View>
     </View>
-  )
+  );
-}
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {};
 
-export default TransportDate
+export default connect(mapStateToProps, mapDispatchToProps)(TransportDate);

src/screens/DeliveryForm/TransportMethod/index.js

@@ -1,12 +1,134 @@
-import { View, Text } from 'react-native'
+import {
-import React from 'react'
+  View,
+  Text,
+  Pressable,
+  TouchableOpacity,
+  Appearance,
+  ActivityIndicator,
+} from "react-native";
+import React, { useEffect, useCallback } from "react";
+import { connect } from "react-redux";
+import { useNavigation } from "@react-navigation/native";
+import { transport } from "../../../redux/actions";
+import separate from "../../../utils/separate";
 
-const TransportMethod = () => {
+//style
+import tw from "tailwind-rn";
+import Colors from "../../../constants/Colors";
+import fontSize from "../../../constants/fontSize";
+
+const TransportMethod = ({
+  list,
+  getList,
+  setTransport,
+  factorInfo,
+  userId,
+  loading,
+}) => {
+  const colorScheme = Appearance.getColorScheme();
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  const Method = useCallback(
+    ({ method, active }) => {
+      return (
+        <Pressable
+          style={[
+            tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`),
+            {
+              backgroundColor: active
+                ? Colors.theme1[colorScheme].greenCF + "15"
+                : Colors.theme1[colorScheme].grayE3 + "44",
+              borderWidth: 2,
+              borderColor: active
+                ? Colors.theme1[colorScheme].greenCF
+                : Colors.theme1[colorScheme].grayE3,
+            },
+          ]}
+          onPress={() =>
+            !active
+              ? setTransport(
+                  { factorId: factorInfo?.id, transportId: method?.id },
+                  { userId },
+                  {}
+                )
+              : {}
+          }
+        >
+          {loading && !active ? (
+            <ActivityIndicator
+              size="small"
+              color={
+                factorInfo?.transportId === method?.id
+                  ? Colors.theme1[colorScheme].greenC8
+                  : Colors.theme1[colorScheme].gray20
+              }
+            />
+          ) : (
+            <Text
+              style={{
+                fontFamily: "bold",
+                fontSize: fontSize.lg,
+                color: active
+                  ? Colors.theme1[colorScheme].gray20
+                  : Colors.theme1[colorScheme].gray20,
+              }}
+            >
+              {method.name}
+            </Text>
+          )}
+          <Text
+            style={{
+              fontFamily: "bold",
+              fontSize: fontSize.sm,
+              color: active
+                ? Colors.theme1[colorScheme].green20
+                : Colors.theme1[colorScheme].gray20,
+            }}
+          >
+            هزینه ارسال {separate(method.price)}
+          </Text>
+        </Pressable>
+      );
+    },
+    [factorInfo, loading]
+  );
   return (
-    <View>
+    <View style={tw("mt-0 w-full")}>
-      <Text>TransportMethod</Text>
+      <Text
+        style={{
+          fontSize: fontSize.lg,
+          fontFamily: "bold",
+          color: Colors.theme1[colorScheme].green79,
+        }}
+      >
+        لطفا یک روش ارسال انتخاب کنید
+      </Text>
+      <View style={tw("p-0 m-0 flex flex-col w-full")}>
+        {list?.map((method, index) => (
+          <Method
+            method={method}
+            key={index}
+            active={factorInfo?.transportId === method?.id}
+          />
+        ))}
+      </View>
     </View>
-  )
+  );
-}
+};
+
+const mapStateToProps = (state) => ({
+  list: state.transport.list,
+  factorInfo: state.userFactor.info,
+  userId: state.user.status?.id,
+  loading: state.userFactor.loading,
+});
+
+const mapDispatchToProps = {
+  getList: transport.list,
+  setTransport: transport.set,
+};
 
-export default TransportMethod
+export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod);

src/screens/DeliveryForm/index.js

@@ -7,24 +7,35 @@ import {
   StatusBar,
   Platform,
   Dimensions,
+  Appearance,
 } from "react-native";
-import React from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { userFactor, userAddress } from "../../redux/actions";
 import { useNavigation } from "@react-navigation/native";
+import Svg, { G, Path } from "react-native-svg";
 
 //components
 import Navbar from "../../components/Navbar";
-import TransportMethod from "./PaymentMethod";
+import TransportMethod from "./TransportMethod";
 import TransportDate from "./TransportDate";
 // import PaymentMethod from "./PaymentMethod";
 import Address from "./Address";
+import CustomPressable from "../../components/Pressable";
 
 //style
 import tw from "tailwind-rn";
+import Colors from "../../constants/Colors";
+import fontSize from "../../constants/fontSize";
 
-const DeliveryForm = ({ list }) => {
+const DeliveryForm = ({ list, form, getList, getFactorInfo, userId }) => {
+  const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
+
+  useEffect(() => {
+    getFactorInfo({ userId });
+    getList();
+  }, []);
   return (
     <SafeAreaView
       style={{
@@ -33,7 +44,6 @@ const DeliveryForm = ({ list }) => {
       }}
     >
       <Navbar
-        setBoxPosition={setBoxPosition}
         headerOptions={{
           logo: false,
           menu: true,
@@ -48,29 +58,24 @@ const DeliveryForm = ({ list }) => {
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.container}
       >
-        <View style={tw("w-full flex flex-col pt-4 pb-4")}>
+        <View style={tw("w-full flex flex-col pb-4")}>
-          <View style={tw("w-full flex flex-row gap-5")}>
+          <View style={tw("w-full flex flex-row")}>
             <Address addresses={list} />
           </View>
-          <View style={tw("w-full flex flex-row gap-5 mt-8")}>
+          <View style={tw("w-full flex flex-row mt-5")}>
             <TransportMethod />
           </View>
-          <View style={tw("w-full flex flex-row gap-5 mt-8")}>
+          <View style={tw("w-full flex flex-row mt-5 mb-5")}>
             <TransportDate transportDate={form.transportDate} />
           </View>
-          <View
+          <CustomPressable
-            style={[
+            title={"ادامه فرایند خرید"}
-              tw("flex justify-between items-center py-3 px-4 w-full"),
+            backgroundColor={Colors.theme1[colorScheme].greenCF}
-              { backgroundColor: "#061B30" },
+            color={"white"}
-            ]}
+            border={{ color: "#196EC0", width: 0 }}
-          >
+            width={"100%"}
-            <Text style={tw("")}>تکمیل اطلاعات</Text>
+            onPress={() => navigation.push("DeliveryForm")}
-            {/* <Image
+          />
-              source={{ uri: isDark ? arrowWhiteIcon : arrowBlueIcon }}
-              style={tw(`w-6`)}
-              onPress={() => navigation.goBack()}
-            /> */}
-          </View>
         </View>
       </ScrollView>
     </SafeAreaView>
@@ -102,3 +107,25 @@ const mapDispatchToProps = {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(DeliveryForm);
+
+DeliveryForm.defaultProps = {
+  form: {
+    transportDate: {
+      day: new Date(),
+      times: [
+        {
+          time: "ساعت 9 تا 12",
+          status: "completed",
+        },
+        {
+          time: "ساعت 12 تا 15",
+          status: "free",
+        },
+        {
+          time: "ساعت 15 تا 18",
+          status: "free",
+        },
+      ],
+    },
+  },
+};

src/screens/Product/index.js

@@ -31,7 +31,7 @@ function Product({
       }}
     >
       <Navbar
-        setBoxPosition={setBoxPosition}
+        // setBoxPosition={setBoxPosition}
         headerOptions={{
           logo: false,
           menu: true,