From 2f280e59868e3c3863f53a146dce4ba7e2ad7631 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sat, 26 Feb 2022 23:26:38 +0330 Subject: [PATCH] reza added something --- navigation/index.js | 4 +- src/components/CustomTextInput.js | 19 +- src/redux/actions/index.js | 3 +- src/redux/actions/transport.js | 17 + src/redux/reducers/index.js | 3 +- src/redux/reducers/public.js | 22 +- src/redux/reducers/transport.js | 25 ++ src/redux/store.js | 6 +- src/screens/Address/index.js | 314 +++++++++++++++++- src/screens/DeliveryForm/Address/index.js | 148 ++++++++- .../DeliveryForm/PaymentMethod/index.js | 2 +- .../DeliveryForm/TransportDate/index.js | 84 ++++- .../DeliveryForm/TransportMethod/index.js | 138 +++++++- src/screens/DeliveryForm/index.js | 69 ++-- src/screens/Product/index.js | 2 +- 15 files changed, 784 insertions(+), 72 deletions(-) create mode 100644 src/redux/actions/transport.js create mode 100644 src/redux/reducers/transport.js diff --git a/navigation/index.js b/navigation/index.js index e752469..a8cce13 100644 --- a/navigation/index.js +++ b/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 = () => { }} /> { + ); } diff --git a/src/components/CustomTextInput.js b/src/components/CustomTextInput.js index 96ea379..2d888dd 100644 --- a/src/components/CustomTextInput.js +++ b/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 = ({ setIsFocused(true)} > {label} 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) } /> diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js index 672062a..4f60969 100644 --- a/src/redux/actions/index.js +++ b/src/redux/actions/index.js @@ -10,4 +10,5 @@ export { default as content } from "./content"; export { default as faq } from "./faq"; export { default as file } from "./file"; export { default as qr } from "./qr"; -export {default as userAddress} from "./userAddress"; \ No newline at end of file +export {default as userAddress} from "./userAddress"; +export { default as transport } from "./transport"; \ No newline at end of file diff --git a/src/redux/actions/transport.js b/src/redux/actions/transport.js new file mode 100644 index 0000000..22a5b5a --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index f87f3a1..b6a4278 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -9,4 +9,5 @@ export { default as file } from "./file"; export { default as userFactor } from "./userFactor"; export { default as userProduct } from "./userProduct"; import { default as qr } from "./qr"; -export { default as userAddress } from "./userAddress"; \ No newline at end of file +export { default as userAddress } from "./userAddress"; +export { default as transport } from "./transport"; \ No newline at end of file diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index b2bacc1..28aa9e8 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -14,8 +14,10 @@ const initialState = { arList: [], blogList: [], blog: null, - province: null, - city: null, + provinces: [], + 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": diff --git a/src/redux/reducers/transport.js b/src/redux/reducers/transport.js new file mode 100644 index 0000000..60446db --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/redux/store.js b/src/redux/store.js index 2fcf25b..8725c70 100644 --- a/src/redux/store.js +++ b/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, diff --git a/src/screens/Address/index.js b/src/screens/Address/index.js index 83c4a61..6d8f449 100644 --- a/src/screens/Address/index.js +++ b/src/screens/Address/index.js @@ -1,12 +1,308 @@ -import { View, Text } from 'react-native' -import React from 'react' +import { + 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 ( + + + {title} + + + {text} + + + ); + }; -const Address = () => { return ( - - Address - - ) -} + + + + +
+ onChange(name, value)} + autoFocus={false} + regex={(val) => val} + /> + onChange(name, value)} + autoFocus={false} + regex={(val) => val} + /> +
+ onChange(name, value)} + autoFocus={false} + regex={(val) => val} + /> + onChange(name, value)} + autoFocus={false} + regex={(val) => val} + /> +
+ + onChange(name, value)} + options={city} + width={"100%"} + name="cityId" + /> + + + navigation.push("Address")} + /> + + + + ); +}; + +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; \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(Address); diff --git a/src/screens/DeliveryForm/Address/index.js b/src/screens/DeliveryForm/Address/index.js index cefe5c9..d4547fe 100644 --- a/src/screens/DeliveryForm/Address/index.js +++ b/src/screens/DeliveryForm/Address/index.js @@ -1,12 +1,144 @@ -import { View, Text } from 'react-native' -import React from 'react' +import { + 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 ( + + userAddressId === address?.id + ? {} + : update({ userAddressId: address.id, userId }) + } + > + {loading && userAddressId !== address?.id ? ( + + ) : ( + + )} + + + {address.address} + + + + ); + }; -const Address = () => { return ( - - Address + + + {addresses.map((address, index) => ( + + ))} + + navigation.push("CreateAddress")} + > + + یک آدرس جدید اضافه کنید + + + + + + - ) -} + ); +}; + +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 \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(Address); diff --git a/src/screens/DeliveryForm/PaymentMethod/index.js b/src/screens/DeliveryForm/PaymentMethod/index.js index 003ebc9..1a1728e 100644 --- a/src/screens/DeliveryForm/PaymentMethod/index.js +++ b/src/screens/DeliveryForm/PaymentMethod/index.js @@ -4,7 +4,7 @@ import React from 'react' const PaymentMethod = () => { return ( - PaymentMethod + ) } diff --git a/src/screens/DeliveryForm/TransportDate/index.js b/src/screens/DeliveryForm/TransportDate/index.js index 4ab6cf1..c4dfaba 100644 --- a/src/screens/DeliveryForm/TransportDate/index.js +++ b/src/screens/DeliveryForm/TransportDate/index.js @@ -1,12 +1,80 @@ -import { View, Text } from 'react-native' -import React from 'react' +import { View, Text, Pressable, Appearance } from "react-native"; +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 ( + setActiveDate(time)} + > + + {time.time} + + + تکمیل ظرفیت + + + ); + }, []); return ( - - TransportDate + + + زمان ارسال را انتخاب کنید + + + {transportDate?.times?.map((time, index) => ( + - ) -} + ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; -export default TransportDate \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(TransportDate); diff --git a/src/screens/DeliveryForm/TransportMethod/index.js b/src/screens/DeliveryForm/TransportMethod/index.js index 26182e3..6030490 100644 --- a/src/screens/DeliveryForm/TransportMethod/index.js +++ b/src/screens/DeliveryForm/TransportMethod/index.js @@ -1,12 +1,134 @@ -import { View, Text } from 'react-native' -import React from 'react' +import { + 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 ( + + !active + ? setTransport( + { factorId: factorInfo?.id, transportId: method?.id }, + { userId }, + {} + ) + : {} + } + > + {loading && !active ? ( + + ) : ( + + {method.name} + + )} + + هزینه ارسال {separate(method.price)} + + + ); + }, + [factorInfo, loading] + ); return ( - - TransportMethod + + + لطفا یک روش ارسال انتخاب کنید + + + {list?.map((method, index) => ( + + ))} + - ) -} + ); +}; + +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 \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod); diff --git a/src/screens/DeliveryForm/index.js b/src/screens/DeliveryForm/index.js index bd1be67..635fc47 100644 --- a/src/screens/DeliveryForm/index.js +++ b/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 ( { }} > { contentContainerStyle={styles.contentContainerStyle} style={styles.container} > - - + +
- + - + - - تکمیل اطلاعات - {/* navigation.goBack()} - /> */} - + navigation.push("DeliveryForm")} + /> @@ -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", + }, + ], + }, + }, +}; diff --git a/src/screens/Product/index.js b/src/screens/Product/index.js index cedab86..bc0536b 100644 --- a/src/screens/Product/index.js +++ b/src/screens/Product/index.js @@ -31,7 +31,7 @@ function Product({ }} >