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.
 
 
 
 
 

134 lines
3.5 KiB

import {
View,
Text,
Pressable,
TouchableOpacity,
Appearance,
ActivityIndicator,
} from "react-native";
import React, { useEffect, useCallback } from "react";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { transport } from "../../../redux/actions";
import separate from "../../../utils/separate";
//style
import tw from "tailwind-rn";
import Colors from "../../../constants/Colors";
import fontSize from "../../../constants/fontSize";
const TransportMethod = ({
list,
getList,
setTransport,
factorInfo,
userId,
loading,
}) => {
const colorScheme = Appearance.getColorScheme();
useEffect(() => {
getList();
}, []);
const Method = useCallback(
({ method, active }) => {
return (
<Pressable
style={[
tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`),
{
backgroundColor: active
? Colors.theme1[colorScheme].greenCF + "15"
: Colors.theme1[colorScheme].grayE3 + "44",
borderWidth: 2,
borderColor: active
? Colors.theme1[colorScheme].greenCF
: Colors.theme1[colorScheme].grayE3,
},
]}
onPress={() =>
!active
? setTransport(
{ factorId: factorInfo?.id, transportId: method?.id },
{ userId },
{}
)
: {}
}
>
{loading && !active ? (
<ActivityIndicator
size="small"
color={
factorInfo?.transportId === method?.id
? Colors.theme1[colorScheme].greenC8
: Colors.theme1[colorScheme].gray20
}
/>
) : (
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.lg,
color: active
? Colors.theme1[colorScheme].gray20
: Colors.theme1[colorScheme].gray20,
}}
>
{method.name}
</Text>
)}
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.sm,
color: active
? Colors.theme1[colorScheme].green20
: Colors.theme1[colorScheme].gray20,
}}
>
هزینه ارسال {separate(method.price)}
</Text>
</Pressable>
);
},
[factorInfo, loading]
);
return (
<View style={tw("mt-0 w-full")}>
<Text
style={{
fontSize: fontSize.lg,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
}}
>
لطفا یک روش ارسال انتخاب کنید
</Text>
<View style={tw("p-0 m-0 flex flex-col w-full")}>
{list?.map((method, index) => (
<Method
method={method}
key={index}
active={factorInfo?.transportId === method?.id}
/>
))}
</View>
</View>
);
};
const mapStateToProps = (state) => ({
list: state.transport.list,
factorInfo: state.userFactor.info,
userId: state.user.status?.id,
loading: state.userFactor.loading,
});
const mapDispatchToProps = {
getList: transport.list,
setTransport: transport.set,
};
export default connect(mapStateToProps, mapDispatchToProps)(TransportMethod);