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

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",
},
],
},
},
};