From 8d7e687d73db179ed43a1d239824555536de8d08 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimiireza98@gmail.com>
Date: Tue, 12 Apr 2022 18:46:45 +0430
Subject: [PATCH] reza fixed compo colors before Video

---
 src/screens/ShoppingCart/components/Code.js   | 12 ++--
 .../ShoppingCart/components/Product.js        | 27 ++++----
 src/screens/ShoppingCart/index.js             | 65 ++++++++++++-------
 3 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/screens/ShoppingCart/components/Code.js b/src/screens/ShoppingCart/components/Code.js
index f0874c6..7baa066 100644
--- a/src/screens/ShoppingCart/components/Code.js
+++ b/src/screens/ShoppingCart/components/Code.js
@@ -4,9 +4,7 @@ import {
   Text,
   Pressable,
   TextInput,
-  Dimensions,
   KeyboardAvoidingView,
-  Appearance,
 } from "react-native";
 import { connect } from "react-redux";
 import { userFactor } from "../../../redux/actions";
@@ -16,8 +14,7 @@ import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 import tw from "tailwind-rn";
 
-function Code({ codeId, setCodeId, userId, factorId }) {
-  const colorScheme = Appearance.getColorScheme();
+function Code({ codeId, setCodeId, userId, factorId, theme }) {
   const [value, setValue] = React.useState(codeId || "");
 
   const setOff = () => {
@@ -32,7 +29,7 @@ function Code({ codeId, setCodeId, userId, factorId }) {
       <View
         style={[
           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
@@ -42,14 +39,14 @@ function Code({ codeId, setCodeId, userId, factorId }) {
             { fontSize: fontSize.tiny, fontFamily: "regular" },
           ]}
           placeholder={"کد تخفیف دارید ؟"}
-          placeholderTextColor={Colors.theme1[colorScheme].gray20 + 'aa'}
+          placeholderTextColor={Colors.theme1[theme].gray20 + 'aa'}
         />
         <Pressable
           onPress={() => setOff()}
           style={[
             tw("py-3 px-5"),
             {
-              backgroundColor: Colors.theme1[colorScheme].greenCF,
+              backgroundColor: Colors.theme1[theme].greenCF,
               borderTopLeftRadius: 1,
               borderBottomLeftRadius: 1,
             },
@@ -73,6 +70,7 @@ const mapStateToProps = (state) => ({
   codeId: state.userFactor.info?.codeId,
   userId: state.user.status?.id,
   factorId: state.userFactor.info?.id,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/ShoppingCart/components/Product.js b/src/screens/ShoppingCart/components/Product.js
index 494e4e1..c827aeb 100644
--- a/src/screens/ShoppingCart/components/Product.js
+++ b/src/screens/ShoppingCart/components/Product.js
@@ -5,7 +5,6 @@ import {
   Image,
   Dimensions,
   Pressable,
-  Appearance,
   ActivityIndicator,
   Platform,
 } from "react-native";
@@ -22,8 +21,7 @@ import tw from "tailwind-rn";
 const width = Dimensions.get("window").width;
 const ios = Platform.OS === "ios";
 
-function Product({ product, grades, pushToCart, loading, mobile }) {
-  const colorScheme = Appearance.getColorScheme();
+function Product({ product, grades, pushToCart, loading, mobile, theme }) {
   return (
     <View
       style={[
@@ -32,7 +30,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
         ),
         {
           borderBottomWidth: 1,
-          borderColor: Colors.theme1[colorScheme].grayE3,
+          borderColor: Colors.theme1[theme].grayE3,
           direction: "rtl",
         },
       ]}
@@ -56,7 +54,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
           <Text
             style={{
               fontSize: mobile ? fontSize.lg : fontSize.xl4,
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               marginBottom: 5,
               fontFamily: "bold",
             }}
@@ -66,7 +64,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
           <Text
             style={{
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1[colorScheme].gray2077,
+              color: Colors.theme1[theme].gray2077,
               marginBottom: 3,
               fontFamily: "regular",
             }}
@@ -76,7 +74,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
           <Text
             style={{
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1[colorScheme].gray2077,
+              color: Colors.theme1[theme].gray2077,
               fontFamily: "regular",
             }}
           >
@@ -118,7 +116,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
         <AntDesign
           name="close"
           size={mobile ? 20 : 30}
-          color={Colors.theme1[colorScheme].redFF1}
+          color={Colors.theme1[theme].redFF1}
           onPress={() =>
             pushToCart(
               {
@@ -152,14 +150,14 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
                   }`
                 ),
                 {
-                  borderColor: Colors.theme1[colorScheme].greenCF,
+                  borderColor: Colors.theme1[theme].greenCF,
                 },
               ]}
             >
               <Text
                 style={{
                   fontSize: mobile ? fontSize.xl : fontSize.xl4,
-                  color: Colors.theme1[colorScheme].greenCF,
+                  color: Colors.theme1[theme].greenCF,
                   fontFamily: "light",
                 }}
               >
@@ -170,7 +168,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
               <ActivityIndicator
                 style={tw("mx-2")}
                 size="small"
-                color={Colors.theme1[colorScheme].greenBA}
+                color={Colors.theme1[theme].greenBA}
               />
             ) : (
               <Text
@@ -178,7 +176,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
                   tw("mx-2.5"),
                   {
                     fontSize: fontSize.xl6,
-                    color: Colors.theme1[colorScheme].greenBA,
+                    color: Colors.theme1[theme].greenBA,
                     fontFamily: "bold",
                   },
                 ]}
@@ -202,14 +200,14 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
                   }`
                 ),
                 {
-                  borderColor: Colors.theme1[colorScheme].greenCF,
+                  borderColor: Colors.theme1[theme].greenCF,
                 },
               ]}
             >
               <Text
                 style={{
                   fontSize: mobile ? fontSize.xl : fontSize.xl4,
-                  color: Colors.theme1[colorScheme].greenCF,
+                  color: Colors.theme1[theme].greenCF,
                   fontFamily: "bold",
                 }}
               >
@@ -247,6 +245,7 @@ function Product({ product, grades, pushToCart, loading, mobile }) {
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/ShoppingCart/index.js b/src/screens/ShoppingCart/index.js
index ae39ef1..92c4e44 100644
--- a/src/screens/ShoppingCart/index.js
+++ b/src/screens/ShoppingCart/index.js
@@ -17,7 +17,6 @@ import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
 import separate from "../../utils/separate";
-import * as Linking from "expo-linking";
 
 //components
 import Product from "./components/Product";
@@ -32,10 +31,9 @@ import fontSize from "../../constants/fontSize";
 import Colors from "../../constants/Colors";
 import tw from "tailwind-rn";
 
-const { width, height } = Dimensions.get("window");
+const { height } = Dimensions.get("window");
 
-const PriceStatus = ({ name, value, type }) => {
-  const colorScheme = Appearance.getColorScheme();
+const PriceStatus = ({ name, value, type, theme }) => {
   return (
     <View style={tw("w-full flex flex-row-reverse justify-between py-2")}>
       <Text
@@ -43,7 +41,7 @@ const PriceStatus = ({ name, value, type }) => {
           tw(""),
           {
             fontSize: fontSize.tiny,
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
             fontFamily: "bold",
           },
         ]}
@@ -56,8 +54,8 @@ const PriceStatus = ({ name, value, type }) => {
             {
               color:
                 type === "error"
-                  ? Colors.theme1[colorScheme].redFF1
-                  : Colors.theme1[colorScheme].green79,
+                  ? Colors.theme1[theme].redFF1
+                  : Colors.theme1[theme].green79,
               fontSize: fontSize.xl,
               fontFamily: "bold",
             },
@@ -70,8 +68,8 @@ const PriceStatus = ({ name, value, type }) => {
             {
               color:
                 type === "error"
-                  ? Colors.theme1[colorScheme].redFF1
-                  : Colors.theme1[colorScheme].green79,
+                  ? Colors.theme1[theme].redFF1
+                  : Colors.theme1[theme].green79,
               fontSize: fontSize.sm,
               fontFamily: "regular",
               marginRight: 4,
@@ -93,15 +91,22 @@ function ShoppingCart({
   getFactorInfo,
   loading,
   payFactor,
+  theme
 }) {
   const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
   const [position, setPosition] = useState("100%");
 
-  const isEmpty = list.filter((product) => product.condition < 2).length === 0;
-  const hasPhysical =
-    list.filter((product) => product.condition < 2 && product.productType === 2)
-      .length !== 0;
+  const isEmpty = React.useMemo(() => {
+    return list.filter((product) => product.condition < 2).length === 0;
+  }, [list]);
+
+  const hasPhysical = React.useMemo(() => {
+    return (
+      list.filter(
+        (product) => product.condition < 2 && product.productType === 2
+      ).length !== 0
+    );
+  }, [list]);
 
   useEffect(() => {
     if (list.length === 0) {
@@ -157,20 +162,29 @@ function ShoppingCart({
           >
             <PriceStatus
               name="مبلغ سبد خرید"
-              value={isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))}
+              value={
+                isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
+              }
               type="normal"
+              theme={theme}
             />
             <PriceStatus
               name="میزان تخفیف"
-              value={isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))}
+              value={
+                isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
+              }
               type="error"
+              theme={theme}
             />
             <PriceStatus
               name="مالیات بر ارزش افزوده"
               value={
-                isEmpty ? 0 : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
+                isEmpty
+                  ? 0
+                  : separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
               }
               type="error"
+              theme={theme}
             />
           </View>
           <View
@@ -181,7 +195,7 @@ function ShoppingCart({
             <Text
               style={[
                 {
-                  color: Colors.theme1[colorScheme].green79,
+                  color: Colors.theme1[theme].green79,
                   fontSize: fontSize.base,
                   fontFamily: "bold",
                 },
@@ -193,18 +207,18 @@ function ShoppingCart({
               <Text
                 style={[
                   {
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                     fontSize: fontSize.xl,
                     fontFamily: "bold",
                   },
                 ]}
               >
-                {isEmpty ? 0 : separate(factorInfo?.payPrice || '')}
+                {isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
               </Text>
               <Text
                 style={[
                   {
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                     fontSize: fontSize.sm,
                     fontFamily: "regular",
                     marginRight: 4,
@@ -221,14 +235,14 @@ function ShoppingCart({
                 tw(
                   "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
                 style={[
                   tw("mr-1"),
                   {
-                    color: Colors.theme1[colorScheme].green79,
+                    color: Colors.theme1[theme].green79,
                     fontSize: fontSize.sm,
                     fontFamily: "regular",
                   },
@@ -239,13 +253,13 @@ function ShoppingCart({
               <Ionicons
                 name="alert-circle-outline"
                 size={20}
-                color={Colors.theme1[colorScheme].greenC8}
+                color={Colors.theme1[theme].greenC8}
               />
             </Pressable>
 
             <CustomPressable
               title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
-              backgroundColor={Colors.theme1[colorScheme].greenCF}
+              backgroundColor={Colors.theme1[theme].greenCF}
               color={"white"}
               border={{ color: "#196EC0", width: 0 }}
               width={"100%"}
@@ -279,6 +293,7 @@ const mapStateToProps = (state) => ({
   userId: state.user.status?.id,
   hasPhysical: state.userProduct.hasPhysical,
   loading: state.userProduct.loading,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {