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.
308 lines
8.3 KiB
308 lines
8.3 KiB
import { |
|
View, |
|
SafeAreaView, |
|
ScrollView, |
|
StyleSheet, |
|
StatusBar, |
|
Platform, |
|
Dimensions, |
|
Text, |
|
} from "react-native"; |
|
import React, { useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
import { userFactor, userAddress } from "../../redux/actions"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers"; |
|
import separate from "../../utils/separate"; |
|
|
|
//components |
|
import Navbar from "../../components/Navbar"; |
|
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 { height } = Dimensions.get("window"); |
|
|
|
const PriceStatus = ({ name, value, type, theme }) => { |
|
return ( |
|
<View style={tw("w-full flex flex-row-reverse justify-between py-2")}> |
|
<Text |
|
style={[ |
|
tw(""), |
|
{ |
|
fontSize: fontSize.tiny, |
|
color: |
|
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white, |
|
fontFamily: "bold", |
|
}, |
|
]} |
|
> |
|
{name} |
|
</Text> |
|
<View style={tw("flex flex-row-reverse items-center")}> |
|
<Text |
|
style={[ |
|
{ |
|
color: |
|
type === "error" |
|
? Colors.theme1.redFF1 |
|
: theme === "light" |
|
? Colors.theme1.green79 |
|
: Colors.theme1.white, |
|
fontSize: fontSize.xl, |
|
fontFamily: "bold", |
|
}, |
|
]} |
|
> |
|
{value} |
|
</Text> |
|
<Text |
|
style={[ |
|
{ |
|
color: |
|
type === "error" |
|
? Colors.theme1.redFF1 |
|
: theme === "light" |
|
? Colors.theme1.green79 |
|
: Colors.theme1.white, |
|
fontSize: fontSize.sm, |
|
fontFamily: "regular", |
|
marginRight: 4, |
|
}, |
|
]} |
|
> |
|
تومان |
|
</Text> |
|
</View> |
|
</View> |
|
); |
|
}; |
|
|
|
const DeliveryForm = ({ |
|
list, |
|
form, |
|
getList, |
|
getFactorInfo, |
|
userId, |
|
payFactor, |
|
factorInfo, |
|
theme, |
|
user, |
|
}) => { |
|
const navigation = useNavigation(); |
|
useEffect(() => { |
|
getFactorInfo({ userId }); |
|
getList(); |
|
}, []); |
|
|
|
React.useEffect(() => { |
|
StatusBar.setBarStyle( |
|
`${theme === "light" ? "dark" : "light"}-content`, |
|
true |
|
); |
|
}, [theme]); |
|
|
|
return ( |
|
<SafeAreaView |
|
style={{ |
|
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
|
position: "relative", |
|
paddingHorizontal: 16, |
|
flex: 1, |
|
}} |
|
> |
|
<Navbar |
|
headerOptions={{ |
|
logo: false, |
|
menu: false, |
|
hamburgerMenu: false, |
|
title: "", |
|
bookmark: false, |
|
qr: false, |
|
back: true, |
|
}} |
|
/> |
|
<ScrollView |
|
showsVerticalScrollIndicator={false} |
|
contentContainerStyle={styles.contentContainerStyle} |
|
style={styles.container} |
|
> |
|
<View style={tw("w-full flex pb-4")}> |
|
<View style={tw("w-full flex flex-row")}> |
|
<Address addresses={list} /> |
|
</View> |
|
<View style={tw("w-full flex flex-row mt-5")}> |
|
<TransportMethod /> |
|
</View> |
|
{factorInfo?.transportId === 2 ? ( |
|
<View style={tw("w-full flex flex-row mt-5 mb-5")}> |
|
<TransportDate transportDate={form?.transportDate} /> |
|
</View> |
|
) : null} |
|
<View |
|
style={tw( |
|
`flex w-full border-t py-2 border-gray-300 border-b mt-6 ${ |
|
theme === "light" ? "" : "border-opacity-20" |
|
}` |
|
)} |
|
> |
|
<PriceStatus |
|
name="مبلغ سبد خرید" |
|
value={separate(Math.round(factorInfo?.sumPrice || 0))} |
|
type="normal" |
|
theme={theme} |
|
/> |
|
<PriceStatus |
|
name="هزینه ارسال" |
|
value={separate( |
|
Math.round(list?.length ? factorInfo?.transportPrice : 0) |
|
)} |
|
type="error" |
|
theme={theme} |
|
/> |
|
<PriceStatus |
|
name="میزان تخفیف" |
|
value={separate(Math.round(factorInfo?.offPrice || 0))} |
|
type="error" |
|
theme={theme} |
|
/> |
|
</View> |
|
<View |
|
style={tw( |
|
"flex flex-row-reverse justify-between items-center w-full py-3" |
|
)} |
|
> |
|
<Text |
|
style={[ |
|
{ |
|
color: |
|
theme === "light" |
|
? Colors.theme1.green79 |
|
: Colors.theme1.white, |
|
fontSize: fontSize.base, |
|
fontFamily: "bold", |
|
}, |
|
]} |
|
> |
|
جمع کل سبد خرید |
|
</Text> |
|
<View style={tw("flex flex-row-reverse items-center")}> |
|
<Text |
|
style={[ |
|
{ |
|
color: |
|
theme === "light" |
|
? Colors.theme1.green79 |
|
: Colors.theme1.white, |
|
fontSize: fontSize.xl, |
|
fontFamily: "bold", |
|
}, |
|
]} |
|
> |
|
{separate(factorInfo?.payPrice)} |
|
</Text> |
|
<Text |
|
style={[ |
|
{ |
|
color: |
|
theme === "light" |
|
? Colors.theme1.green79 |
|
: Colors.theme1.white, |
|
fontSize: fontSize.sm, |
|
fontFamily: "regular", |
|
marginRight: 4, |
|
}, |
|
]} |
|
> |
|
تومان |
|
</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</ScrollView> |
|
<View style={tw("w-full pt-4")}> |
|
<CustomPressable |
|
title={"پرداخت"} |
|
backgroundColor={Colors.theme1.greenCF} |
|
color={"white"} |
|
border={{ color: "#196EC0", width: 0 }} |
|
width={"100%"} |
|
onPress={() => |
|
user?.postalCode && user?.phone |
|
? factorInfo?.transportId && factorInfo?.userAddressId |
|
? payFactor({ userId, clientUrl: "dnvn://" }) |
|
: asyncAwesomeAlert("خطا", "آدرس یا نحوه ارسال را وارد کنید", { |
|
showCancelButton: false, |
|
confirmText: "باشه", |
|
}) |
|
: asyncAwesomeAlert( |
|
"خطا", |
|
"اطلاعات حساب کاربری شما (مانند: شماره تلفن یا کد پستی) ناقص است.", |
|
{ |
|
showCancelButton: true, |
|
confirmText: "رفتن به پروفایل", |
|
cancelText: "انصراف", |
|
onConfirm: () => |
|
navigation.navigate("CreateAddress", { type: "profile" }), |
|
} |
|
) |
|
} |
|
/> |
|
</View> |
|
</SafeAreaView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
contentContainerStyle: { |
|
paddingBottom: 100, |
|
}, |
|
container: { |
|
paddingVertical: 5, |
|
}, |
|
}); |
|
|
|
const mapStateToProps = (state) => ({ |
|
user: state.user.status, |
|
factorInfo: state.userFactor.info, |
|
userId: state.user.status?.id, |
|
list: state.userAddress.list, |
|
theme: state.publicApi.theme, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
getFactorInfo: userFactor.info, |
|
getList: userAddress.list, |
|
payFactor: userFactor.payment, |
|
}; |
|
|
|
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", |
|
}, |
|
], |
|
}, |
|
}, |
|
};
|
|
|