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.
 
 
 
 
 

319 lines
8.6 KiB

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";
import MapSelector from "../../components/MapSelector";
//style
import tw from "tailwind-rn";
import Colors from "../../constants/Colors";
import fontSize from "../../constants/fontSize";
const ios = Platform.OS === "ios";
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 (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>
);
};
return (
<SafeAreaView
style={{
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")}>
{/* <MapSelector /> */}
<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>
<View style={tw('mb-4')}>
<CustomTextInput
label="کد پستی"
placeholder=""
textAlign="left"
name="postalCode"
maxlength="60"
value={addressFields?.postalCode}
onChange={(name, value) => onChange(name, value)}
autoFocus={false}
regex={(val) => val}
/>
</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 connect(mapStateToProps, mapDispatchToProps)(Address);