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.
 

616 lines
18 KiB

import {
View,
Text,
SafeAreaView,
ScrollView,
StyleSheet,
StatusBar,
Platform,
Dimensions,
Appearance,
KeyboardAvoidingView,
TextInput,
TouchableWithoutFeedback,
} from "react-native";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { publicApi, user, userAddress } from "../../redux/actions";
import onInput from "../../utils/onInput";
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";
//variables
const ios = Platform.OS === "ios";
const { height } = Dimensions.get("window");
const Address = ({
user,
route,
city,
province,
getCity,
getProvince,
provinces,
cities,
createAddress,
profileFields,
setProfileFields,
setProfile,
loading,
setPhase,
cityLoading,
mobile,
theme,
}) => {
const [addressFields, setAddressFields] = useState({});
const [mapAddress, setMapAddress] = useState(null);
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation();
const profilePage = React.useMemo(() => {
return route.params?.type === "profile";
});
useEffect(() => {
getProvince();
setProfileFields({
file: user?.picFileId,
picFileId: user?.picFileId,
docFileIds: user?.docFileIds,
cellphone: user?.cellphone,
firstName: user?.firstName,
lastName: user?.lastName,
password: user?.password,
username: user?.username,
address: user?.address,
email: user?.email,
birthDate: user?.birthDate,
gender: user?.gender,
status: user?.status,
nationalId: user?.nationalId,
phone: user?.phone,
schools: user?.schools,
zoneId: user?.zoneId,
schoolId: user?.schoolId,
postalCode: user?.postalCode,
gradeIds: user?.gradeIds,
provinceId: user?.provinceId,
cityId: user?.cityId,
});
}, []);
useEffect(() => {
StatusBar.setBarStyle(
`${theme === "light" ? "dark" : "light"}-content`,
true
);
}, [theme]);
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,
confirmText: "باشه",
});
}
if (!lastName) {
return asyncAwesomeAlert("خطا", "نام خانوادگی خود را وارد کنید", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!cellphone) {
return asyncAwesomeAlert("خطا", "شماره موبایل خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
} else {
if (cellphone.slice(0, 2) !== "09") {
return asyncAwesomeAlert(
"خطا",
"فرمت شماره موبایل وارد شده اشتباه است.",
{
showCancellphoneButton: false,
confirmText: "باشه",
}
);
}
if (cellphone.length !== 11) {
return asyncAwesomeAlert(
"خطا",
"شماره موبایل میبایست یازده رقم باشد.",
{
showCancelButton: false,
confirmText: "باشه",
}
);
}
}
if (!phone) {
return asyncAwesomeAlert("خطا", "شماره تلفن خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
} else {
if (phone.slice(0, 1) !== "0") {
return asyncAwesomeAlert(
"خطا",
"فرمت شماره تلفن وارد شده اشتباه است.",
{
showCancelButton: false,
confirmText: "باشه",
}
);
}
if (phone.length !== 11) {
return asyncAwesomeAlert("خطا", "شماره تلفن میبایست یازده رقم باشد.", {
showCancelButton: false,
confirmText: "باشه",
});
}
}
if (!provinceId) {
return asyncAwesomeAlert("خطا", "نام استان خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!cityId) {
return asyncAwesomeAlert("خطا", "نام شهرستان خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
}
if (!postalCode) {
return asyncAwesomeAlert("خطا", "کد پستی خود را وارد کنید.", {
showCancelButton: false,
confirmText: "باشه",
});
} else {
if (postalCode.length !== 10) {
return asyncAwesomeAlert("خطا", "کد ملی میبایست ده رقم باشد.", {
showCancelButton: false,
confirmText: "باشه",
});
}
}
if (!mapAddress) {
return asyncAwesomeAlert("خطا", "آدرس خود را از روی نقشه انتخاب کن", {
showCancelButton: false,
confirmText: "باشه",
});
}
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 submitProfile = () => {
const {
firstName,
lastName,
username,
password,
postalCode,
address,
email,
phone,
picFileId,
gender,
nationalId,
birthDate,
schools,
gradeIds,
status,
provinceId,
cityId,
docFileIds,
} = profileFields;
if (phone) {
if (phone.slice(0, 1) !== "0") {
return asyncAwesomeAlert(
"خطا",
"فرمت شماره تلفن وارد شده اشتباه است.",
{
showCancelButton: false,
confirmText: "باشه",
}
);
}
if (phone.length !== 11) {
return asyncAwesomeAlert("خطا", "شماره تلفن میبایست یازده رقم باشد.", {
showCancelButton: false,
confirmText: "باشه",
});
}
}
const data = {
firstName: firstName,
lastName: lastName,
username: username,
cellphone: user.cellphone,
password: password,
postalCode: postalCode,
address: address,
email: email,
phone: phone,
nationalId: nationalId,
picFileId: picFileId,
gender: gender,
birthDate: birthDate,
schools: schools,
gradeIds: gradeIds,
status: status,
provinceId: provinceId,
cityId: cityId,
docFileIds: docFileIds,
};
setProfile(data);
navigation.goBack();
};
const Header = ({ title, text }) => {
return (
<View style={tw(`flex ${mobile ? "mt-2" : "mt-8"}`)}>
<Text
style={{
fontFamily: "bold",
fontSize: mobile ? fontSize.lg : fontSize.xl2,
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
textAlign: ios ? "right" : "auto",
}}
>
{title}
</Text>
<Text
style={{
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.base,
color:
theme === "light"
? Colors.theme1.gray20 + "aa"
: Colors.theme1.white + "aa",
textAlign: ios ? "right" : "auto",
}}
>
{text}
</Text>
</View>
);
};
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
// position: "relative",
flex: 1,
}}
>
<Navbar
headerOptions={{
logo: false,
menu: profilePage ? false : false,
hamburgerMenu: false,
title: profilePage ? "اطلاعات کاربری" : "",
bookmark: profilePage ? false : false,
qr: false,
back: true,
}}
/>
<ScrollView style={tw("flex-1 px-4")}>
<KeyboardAvoidingView>
<TouchableWithoutFeedback>
<View style={tw("flex-1")}>
<Header
title="اطلاعات هویتی"
text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )"
/>
<CustomTextInput
label={profilePage ? "نام" : "نام تحویل گیرنده"}
placeholder=""
textAlign="right"
name="firstName"
maxlength="40"
value={
profilePage
? profileFields.firstName
: addressFields?.firstName
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, firstName: value })
: onChange(name, value)
}
autoFocus={false}
regex={(val) => val}
/>
<CustomTextInput
label={
profilePage ? "نام خانوادگی" : "نام خانوادگی تحویل گیرنده"
}
placeholder=""
textAlign="right"
name="lastName"
maxlength="60"
value={
profilePage ? profileFields.lastName : addressFields?.lastName
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, lastName: value })
: onChange(name, value)
}
autoFocus={false}
regex={(val) => val}
/>
{profilePage ? (
<CustomTextInput
keyboardType="numeric"
label="کد ملی"
placeholder=""
textAlign="left"
name="nationalId"
maxLength={10}
value={profileFields.nationalId}
onChange={(name, value) =>
setProfileFields({ ...profileFields, nationalId: value })
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
) : null}
<View style={tw("mt-4")}></View>
<Header
title="شماره تماس"
text="( شماره موبایل و شماره تلفن ثابت خود را
به همراه پیش شماره وارد کنید )"
/>
<CustomTextInput
keyboardType="numeric"
label={
profilePage ? "شماره موبایل" : "شماره موبایل تحویل گیرنده"
}
placeholder=""
textAlign="left"
name="cellphone"
maxLength={11}
value={
profilePage
? profileFields.cellphone
: addressFields?.cellphone
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, cellphone: value })
: onChange(name, value)
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
<CustomTextInput
keyboardType="numeric"
label={profilePage ? "شماره تلفن" : "شماره تلفن تحویل گیرنده"}
placeholder=""
textAlign="left"
name="phone"
maxLength={11}
value={profilePage ? profileFields.phone : addressFields?.phone}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, phone: value })
: onChange(name, value)
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
<View style={tw("mt-4")}></View>
<Header
title="آدرس"
text="( لطفا نام استان و شهرستان و آدرس
خود را با دقت تکمیل نمایید )"
/>
<View style={tw("w-full mt-4")}>
<Select
defaultValue={
profilePage
? provinces?.filter(
(province) => province.id === profileFields.provinceId
)[0]?.name || province[0]
: province[0]
}
onChange={(name, value) =>
value === "استان" ? {} : onChange(name, value)
}
options={province}
width={"100%"}
name="provinceId"
/>
</View>
<View style={tw("w-full mt-4")}>
<Select
defaultValue={
profilePage
? cities?.filter(
(city) => city.id === profileFields.cityId
)[0]?.name || city[0]
: city[0]
}
onChange={(name, value) =>
value === "شهرستان" ? {} : onChange(name, value)
}
options={city}
width={"100%"}
name="cityId"
/>
</View>
{!profilePage ? (
<TextInput
style={[
tw("w-full mt-4 py-4 px-2 rounded-md h-40"),
{
backgroundColor:
theme === "light" ? Colors.theme1.grayF9 : null,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontSize: fontSize.tiny,
textAlign: "right",
fontFamily: "light",
borderWidth: 1,
borderColor:
theme === "light"
? Colors.theme1.grayE3
: Colors.theme1.white + "55",
},
]}
value={mapAddress}
multiline={true}
textAlignVertical="top"
placeholder="آدرس مورد نظر ..."
onChangeText={(text) => setMapAddress(text)}
placeholderTextColor={
theme === "light"
? Colors.theme1.gray2077
: Colors.theme1.white + "aa"
}
/>
) : null}
<View style={tw("mb-4")}>
<CustomTextInput
keyboardType="numeric"
label="کد پستی"
placeholder=""
textAlign="left"
name="postalCode"
maxLength={10}
value={
profilePage
? profileFields.postalCode
: addressFields?.postalCode
}
onChange={(name, value) =>
profilePage
? setProfileFields({
...profileFields,
postalCode: value,
})
: onChange(name, value)
}
autoFocus={false}
regex={(text) => onInput.numberOnly(text)}
/>
</View>
<CustomPressable
title={
profilePage
? "ذخیره اطلاعات و بازگشت به صفحه قبل"
: "ثبت آدرس"
}
backgroundColor={Colors.theme1.greenCF}
color={"white"}
border={{ color: "#196EC0", width: 0 }}
width={"100%"}
onPress={() => (profilePage ? submitProfile() : submit())}
/>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 0,
},
container: {
flexDirection: "column",
paddingVertical: 5,
paddingHorizontal: 16,
flex: 1,
},
});
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,
user: state.user.status,
profileFields: state.user.profileFields,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
getProvince: publicApi.getProvince,
getCity: publicApi.getCity,
createAddress: userAddress.add,
setProfileFields: user.setProfileFields,
setProfile: user.setProfile,
};
export default connect(mapStateToProps, mapDispatchToProps)(Address);