reza fixed compo colors before Video

master
Reza_ashrafi 2 years ago
parent 03cb34fc08
commit 8d7e687d73
  1. 12
      src/screens/ShoppingCart/components/Code.js
  2. 27
      src/screens/ShoppingCart/components/Product.js
  3. 65
      src/screens/ShoppingCart/index.js

@ -4,9 +4,7 @@ import {
Text, Text,
Pressable, Pressable,
TextInput, TextInput,
Dimensions,
KeyboardAvoidingView, KeyboardAvoidingView,
Appearance,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userFactor } from "../../../redux/actions"; import { userFactor } from "../../../redux/actions";
@ -16,8 +14,7 @@ import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
function Code({ codeId, setCodeId, userId, factorId }) { function Code({ codeId, setCodeId, userId, factorId, theme }) {
const colorScheme = Appearance.getColorScheme();
const [value, setValue] = React.useState(codeId || ""); const [value, setValue] = React.useState(codeId || "");
const setOff = () => { const setOff = () => {
@ -32,7 +29,7 @@ function Code({ codeId, setCodeId, userId, factorId }) {
<View <View
style={[ style={[
tw("flex w-full flex-row-reverse rounded-sm mt-3"), tw("flex w-full flex-row-reverse rounded-sm mt-3"),
{ borderWidth: 1.5, borderColor: Colors.theme1[colorScheme].greenCF }, { borderWidth: 1.5, borderColor: Colors.theme1[theme].greenCF },
]} ]}
> >
<TextInput <TextInput
@ -42,14 +39,14 @@ function Code({ codeId, setCodeId, userId, factorId }) {
{ fontSize: fontSize.tiny, fontFamily: "regular" }, { fontSize: fontSize.tiny, fontFamily: "regular" },
]} ]}
placeholder={"کد تخفیف دارید ؟"} placeholder={"کد تخفیف دارید ؟"}
placeholderTextColor={Colors.theme1[colorScheme].gray20 + 'aa'} placeholderTextColor={Colors.theme1[theme].gray20 + 'aa'}
/> />
<Pressable <Pressable
onPress={() => setOff()} onPress={() => setOff()}
style={[ style={[
tw("py-3 px-5"), tw("py-3 px-5"),
{ {
backgroundColor: Colors.theme1[colorScheme].greenCF, backgroundColor: Colors.theme1[theme].greenCF,
borderTopLeftRadius: 1, borderTopLeftRadius: 1,
borderBottomLeftRadius: 1, borderBottomLeftRadius: 1,
}, },
@ -73,6 +70,7 @@ const mapStateToProps = (state) => ({
codeId: state.userFactor.info?.codeId, codeId: state.userFactor.info?.codeId,
userId: state.user.status?.id, userId: state.user.status?.id,
factorId: state.userFactor.info?.id, factorId: state.userFactor.info?.id,
theme: state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -5,7 +5,6 @@ import {
Image, Image,
Dimensions, Dimensions,
Pressable, Pressable,
Appearance,
ActivityIndicator, ActivityIndicator,
Platform, Platform,
} from "react-native"; } from "react-native";
@ -22,8 +21,7 @@ import tw from "tailwind-rn";
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
function Product({ product, grades, pushToCart, loading, mobile }) { function Product({ product, grades, pushToCart, loading, mobile, theme }) {
const colorScheme = Appearance.getColorScheme();
return ( return (
<View <View
style={[ style={[
@ -32,7 +30,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
), ),
{ {
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.theme1[colorScheme].grayE3, borderColor: Colors.theme1[theme].grayE3,
direction: "rtl", direction: "rtl",
}, },
]} ]}
@ -56,7 +54,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.lg : fontSize.xl4, fontSize: mobile ? fontSize.lg : fontSize.xl4,
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
marginBottom: 5, marginBottom: 5,
fontFamily: "bold", fontFamily: "bold",
}} }}
@ -66,7 +64,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.sm : fontSize.lg, fontSize: mobile ? fontSize.sm : fontSize.lg,
color: Colors.theme1[colorScheme].gray2077, color: Colors.theme1[theme].gray2077,
marginBottom: 3, marginBottom: 3,
fontFamily: "regular", fontFamily: "regular",
}} }}
@ -76,7 +74,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.sm : fontSize.lg, fontSize: mobile ? fontSize.sm : fontSize.lg,
color: Colors.theme1[colorScheme].gray2077, color: Colors.theme1[theme].gray2077,
fontFamily: "regular", fontFamily: "regular",
}} }}
> >
@ -118,7 +116,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<AntDesign <AntDesign
name="close" name="close"
size={mobile ? 20 : 30} size={mobile ? 20 : 30}
color={Colors.theme1[colorScheme].redFF1} color={Colors.theme1[theme].redFF1}
onPress={() => onPress={() =>
pushToCart( pushToCart(
{ {
@ -152,14 +150,14 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
}` }`
), ),
{ {
borderColor: Colors.theme1[colorScheme].greenCF, borderColor: Colors.theme1[theme].greenCF,
}, },
]} ]}
> >
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.xl : fontSize.xl4, fontSize: mobile ? fontSize.xl : fontSize.xl4,
color: Colors.theme1[colorScheme].greenCF, color: Colors.theme1[theme].greenCF,
fontFamily: "light", fontFamily: "light",
}} }}
> >
@ -170,7 +168,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
<ActivityIndicator <ActivityIndicator
style={tw("mx-2")} style={tw("mx-2")}
size="small" size="small"
color={Colors.theme1[colorScheme].greenBA} color={Colors.theme1[theme].greenBA}
/> />
) : ( ) : (
<Text <Text
@ -178,7 +176,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
tw("mx-2.5"), tw("mx-2.5"),
{ {
fontSize: fontSize.xl6, fontSize: fontSize.xl6,
color: Colors.theme1[colorScheme].greenBA, color: Colors.theme1[theme].greenBA,
fontFamily: "bold", fontFamily: "bold",
}, },
]} ]}
@ -202,14 +200,14 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
}` }`
), ),
{ {
borderColor: Colors.theme1[colorScheme].greenCF, borderColor: Colors.theme1[theme].greenCF,
}, },
]} ]}
> >
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.xl : fontSize.xl4, fontSize: mobile ? fontSize.xl : fontSize.xl4,
color: Colors.theme1[colorScheme].greenCF, color: Colors.theme1[theme].greenCF,
fontFamily: "bold", fontFamily: "bold",
}} }}
> >
@ -247,6 +245,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -17,7 +17,6 @@ import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers"; import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
import separate from "../../utils/separate"; import separate from "../../utils/separate";
import * as Linking from "expo-linking";
//components //components
import Product from "./components/Product"; import Product from "./components/Product";
@ -32,10 +31,9 @@ import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors"; import Colors from "../../constants/Colors";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
const { width, height } = Dimensions.get("window"); const { height } = Dimensions.get("window");
const PriceStatus = ({ name, value, type }) => { const PriceStatus = ({ name, value, type, theme }) => {
const colorScheme = Appearance.getColorScheme();
return ( return (
<View style={tw("w-full flex flex-row-reverse justify-between py-2")}> <View style={tw("w-full flex flex-row-reverse justify-between py-2")}>
<Text <Text
@ -43,7 +41,7 @@ const PriceStatus = ({ name, value, type }) => {
tw(""), tw(""),
{ {
fontSize: fontSize.tiny, fontSize: fontSize.tiny,
color: Colors.theme1[colorScheme].gray20, color: Colors.theme1[theme].gray20,
fontFamily: "bold", fontFamily: "bold",
}, },
]} ]}
@ -56,8 +54,8 @@ const PriceStatus = ({ name, value, type }) => {
{ {
color: color:
type === "error" type === "error"
? Colors.theme1[colorScheme].redFF1 ? Colors.theme1[theme].redFF1
: Colors.theme1[colorScheme].green79, : Colors.theme1[theme].green79,
fontSize: fontSize.xl, fontSize: fontSize.xl,
fontFamily: "bold", fontFamily: "bold",
}, },
@ -70,8 +68,8 @@ const PriceStatus = ({ name, value, type }) => {
{ {
color: color:
type === "error" type === "error"
? Colors.theme1[colorScheme].redFF1 ? Colors.theme1[theme].redFF1
: Colors.theme1[colorScheme].green79, : Colors.theme1[theme].green79,
fontSize: fontSize.sm, fontSize: fontSize.sm,
fontFamily: "regular", fontFamily: "regular",
marginRight: 4, marginRight: 4,
@ -93,15 +91,22 @@ function ShoppingCart({
getFactorInfo, getFactorInfo,
loading, loading,
payFactor, payFactor,
theme
}) { }) {
const navigation = useNavigation(); const navigation = useNavigation();
const colorScheme = Appearance.getColorScheme();
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
const isEmpty = list.filter((product) => product.condition < 2).length === 0; const isEmpty = React.useMemo(() => {
const hasPhysical = return list.filter((product) => product.condition < 2).length === 0;
list.filter((product) => product.condition < 2 && product.productType === 2) }, [list]);
.length !== 0;
const hasPhysical = React.useMemo(() => {
return (
list.filter(
(product) => product.condition < 2 && product.productType === 2
).length !== 0
);
}, [list]);
useEffect(() => { useEffect(() => {
if (list.length === 0) { if (list.length === 0) {
@ -157,20 +162,29 @@ function ShoppingCart({
> >
<PriceStatus <PriceStatus
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))} value={
isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
}
type="normal" type="normal"
theme={theme}
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))} value={
isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
}
type="error" type="error"
theme={theme}
/> />
<PriceStatus <PriceStatus
name="مالیات بر ارزش افزوده" name="مالیات بر ارزش افزوده"
value={ value={
isEmpty ? 0 : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009)) isEmpty
? 0
: separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
} }
type="error" type="error"
theme={theme}
/> />
</View> </View>
<View <View
@ -181,7 +195,7 @@ function ShoppingCart({
<Text <Text
style={[ style={[
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.base, fontSize: fontSize.base,
fontFamily: "bold", fontFamily: "bold",
}, },
@ -193,18 +207,18 @@ function ShoppingCart({
<Text <Text
style={[ style={[
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.xl, fontSize: fontSize.xl,
fontFamily: "bold", fontFamily: "bold",
}, },
]} ]}
> >
{isEmpty ? 0 : separate(factorInfo?.payPrice || '')} {isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
</Text> </Text>
<Text <Text
style={[ style={[
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.sm, fontSize: fontSize.sm,
fontFamily: "regular", fontFamily: "regular",
marginRight: 4, marginRight: 4,
@ -221,14 +235,14 @@ function ShoppingCart({
tw( tw(
"w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5" "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
), ),
{ backgroundColor: Colors.theme1[colorScheme].greenC8 + "1a" }, { backgroundColor: Colors.theme1[theme].greenC8 + "1a" },
]} ]}
> >
<Text <Text
style={[ style={[
tw("mr-1"), tw("mr-1"),
{ {
color: Colors.theme1[colorScheme].green79, color: Colors.theme1[theme].green79,
fontSize: fontSize.sm, fontSize: fontSize.sm,
fontFamily: "regular", fontFamily: "regular",
}, },
@ -239,13 +253,13 @@ function ShoppingCart({
<Ionicons <Ionicons
name="alert-circle-outline" name="alert-circle-outline"
size={20} size={20}
color={Colors.theme1[colorScheme].greenC8} color={Colors.theme1[theme].greenC8}
/> />
</Pressable> </Pressable>
<CustomPressable <CustomPressable
title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"} title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
backgroundColor={Colors.theme1[colorScheme].greenCF} backgroundColor={Colors.theme1[theme].greenCF}
color={"white"} color={"white"}
border={{ color: "#196EC0", width: 0 }} border={{ color: "#196EC0", width: 0 }}
width={"100%"} width={"100%"}
@ -279,6 +293,7 @@ const mapStateToProps = (state) => ({
userId: state.user.status?.id, userId: state.user.status?.id,
hasPhysical: state.userProduct.hasPhysical, hasPhysical: state.userProduct.hasPhysical,
loading: state.userProduct.loading, loading: state.userProduct.loading,
theme: state.publicApi.theme
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

Loading…
Cancel
Save