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
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);
|
|
|