reza added some change on alert and product page

src/components/AlertModal.js

@@ -79,7 +79,9 @@ const AlertModal = props => {
       progressColor="red"
       showProgress={alert.showProgress}
       title={alert.title}
+      titleStyle={{ fontFamily : 'bold' }}
       message={alert.message}
+      messageStyle={{textAlign : 'right', fontFamily : 'regular'}}
       closeOnTouchOutside={alert.closeOnTouchOutside}
       closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
       showCancelButton={alert.showCancelButton}
@@ -91,14 +93,16 @@ const AlertModal = props => {
       onConfirmPressed={(onConfirmPressed)}
       contentStyle={{
         width: ReactNative.Dimensions.get('window').width / 1.5,
-
+      }}
+      cancelButtonStyle={{
+        fontFamily : 'regular',
       }}
       confirmButtonStyle={
         {
           width: ReactNative.Dimensions.get('window').width / 4,
           alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'center',
-
+          fontFamily : 'regular'
         }
       }
       useNativeDriver={true}

src/redux/reducers/user.js

@@ -62,7 +62,7 @@ const user = (state = initialState, action) => {
     case "loading":
       return { ...state, loading: true };
     case "error":
-      asyncAwesomeAlert("خظا", data.message, {
+      asyncAwesomeAlert("خطا", data.message, {
         showCancelButton: false,
       });
       return { ...state, loading: false, error: data.message };

src/redux/reducers/userFactor.js

@@ -1,4 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
+import {asyncAwesomeAlert} from '../../utils/AsyncWrappers';
 
 const initialState = {
   loading: false,
@@ -52,6 +53,9 @@ export default function userFactor(state = initialState, action) {
     case "userFactor/loading":
       return { ...state, loading: true };
     case "userFactor/error":
+      asyncAwesomeAlert("خطا", data.message, {
+        showCancelButton: false,
+      });
       // toast.error(data.message);
       return { ...state, loading: false, error: data.message };
     default:

src/redux/reducers/userProduct.js

@@ -1,3 +1,5 @@
+import {asyncAwesomeAlert} from '../../utils/AsyncWrappers';
+
 const initialState = {
   loading: false,
   error: null,
@@ -41,6 +43,9 @@ export default function userFactor(state = initialState, action) {
       return { ...state, loading: true };
     case "userProduct/error":
       // toast.error(data.message);
+      asyncAwesomeAlert("خطا", data.message, {
+        showCancelButton: false,
+      });
       return { ...state, loading: false, error: data.message };
     default:
       return state;

src/screens/Home/components/Blogs.js

@@ -28,8 +28,26 @@ const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
 function Blogs({ blogs, mobile }) {
+  return (
+    <View style={[tw("flex flex-col pr-3 mb-5")]}>
+      <View style={tw("w-full pl-3")}>
+        <Header title={"خواندنی‌ها"} route={"Blogs"} />
+      </View>
+      <FlatList
+        showsHorizontalScrollIndicator={false}
+        horizontal={true}
+        inverted={true}
+        style={[tw("flex flex-row mt-3 pb-7")]}
+        data={blogs}
+        renderItem={({ item }) => <Blog blog={item} mobile={mobile} />}
+        keyExtractor={(item) => item.id}
+      />
+    </View>
+  );
+}
+
+const Blog = ({ blog, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
-  const Blog = ({ blog }) => {
   return (
     <Pressable
       style={[
@@ -45,7 +63,7 @@ function Blogs({ blogs, mobile }) {
           tw("rounded-md"),
           {
             flex: 1,
-              height: mobile ? 180 : width / 2.2 * 9 / 16,
+            height: mobile ? 180 : ((width / 2.2) * 9) / 16,
           },
         ]}
       />
@@ -59,13 +77,13 @@ function Blogs({ blogs, mobile }) {
             shadowOpacity: 0.8,
             shadowRadius: 2,
             elevation: 5,
-              minHeight: 70,
+            height: 85,
           },
         ]}
       >
         <Text
           style={[
-              tw("mb-2"),
+            tw("mb-1"),
             {
               color: Colors.theme1[colorScheme].gray20,
               fontFamily: "regular",
@@ -78,10 +96,14 @@ function Blogs({ blogs, mobile }) {
         </Text>
         <View style={[tw("flex flex-row-reverse justify-between")]}>
           <View style={tw("flex-row-reverse items-center")}>
+            <View style={{ height: 30 }}>
               <Image
+                resizeMode="contain"
                 source={userImage}
-                style={[tw("rounded-full ml-1"), { width: 16, height: 16 }]}
+                style={[tw("rounded-full ml-1"), { width: 20, flex: 1 }]}
               />
+            </View>
+
             <Text
               style={[
                 {
@@ -107,50 +129,12 @@ function Blogs({ blogs, mobile }) {
             >
               ۳۰ دقیقه
             </Text>
-              <Svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={12.051}
-                height={12.051}
-                // {...props}
-              >
-                <G
-                  fill="none"
-                  stroke="#818181"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={0.5}
-                  data-name="vuesax/linear/message"
-                >
-                  <Path d="M4.268 9.54h-.251c-2.013 0-3.013-.502-3.013-3.013v-2.51a2.663 2.663 0 0 1 3.013-3.013h4.017a2.663 2.663 0 0 1 3.013 3.013v2.51A2.663 2.663 0 0 1 8.034 9.54h-.252a.509.509 0 0 0-.4.2l-.753 1a.713.713 0 0 1-1.205 0l-.753-1a.568.568 0 0 0-.403-.2Z" />
-                  <Path
-                    data-name="Vector"
-                    d="M8.032 5.523h0M6.024 5.523h0M4.015 5.523h0"
-                  />
-                </G>
-              </Svg>
           </View>
         </View>
       </View>
     </Pressable>
   );
-  };
+};
-  return (
-    <View style={[tw("flex flex-col pr-3 mb-5")]}>
-      <View style={tw("w-full pl-3")}>
-        <Header title={"خواندنی‌ها"} route={"Blogs"} />
-      </View>
-      <FlatList
-        showsHorizontalScrollIndicator={false}
-        horizontal={true}
-        inverted={true}
-        style={[tw("flex flex-row mt-3 pb-7")]}
-        data={blogs}
-        renderItem={({ item }) => <Blog blog={item} />}
-        keyExtractor={(item) => item.id}
-      />
-    </View>
-  );
-}
 
 const mapStateToProps = (state) => ({
   // features: state.publicApi.home?.features,

src/screens/Home/components/Videos.js

@@ -22,9 +22,33 @@ import fontSize from "../../../constants/fontSize";
 const ios = Platform.OS === "ios";
 
 function Videos({ videos, grades, mobile }) {
-  const colorScheme = Appearance.getColorScheme();
+  return (
-  const Video = ({ video }) => {
+    <View style={[tw("w-full px-2 mb-5")]}>
+      <View
+        style={[
+          tw("w-full flex flex-col rounded-md pt-2 px-2  overflow-hidden"),
+        ]}
+      >
+        <Header title="دوره‌های ویدئویی شما" route={"VOD"} />
+        <FlatList
+          showsHorizontalScrollIndicator={false}
+          style={[tw("py-3")]}
+          horizontal={true}
+          inverted={true}
+          data={videos}
+          renderItem={({ item }) => (
+            <Video video={item} grades={grades} mobile={mobile} />
+          )}
+          keyExtractor={(item) => item.id}
+        />
+      </View>
+    </View>
+  );
+}
+
+const Video = ({ video, mobile, grades }) => {
   const navigation = useNavigation();
+  const colorScheme = Appearance.getColorScheme();
   return (
     <Pressable
       style={[
@@ -73,28 +97,7 @@ function Videos({ videos, grades, mobile }) {
       </View>
     </Pressable>
   );
-  };
+};
-  return (
-    <View style={[tw("w-full px-2 mb-5")]}>
-      <View
-        style={[
-          tw("w-full flex flex-col rounded-md pt-2 px-2  overflow-hidden"),
-        ]}
-      >
-        <Header title="دوره‌های ویدئویی شما" route={"VOD"} />
-        <FlatList
-          showsHorizontalScrollIndicator={false}
-          style={[tw("py-3")]}
-          horizontal={true}
-          inverted={true}
-          data={videos}
-          renderItem={({ item }) => <Video video={item} />}
-          keyExtractor={(item) => item.id}
-        />
-      </View>
-    </View>
-  );
-}
 
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,

src/screens/Home/index.js

@@ -57,20 +57,19 @@ const Home = ({
             back: false,
           }}
         />
-
         <Drawer setBoxPosition={setBoxPosition} position={position} />
         <ScrollView
           contentContainerStyle={styles.contentContainerStyle}
           style={[styles.container]}
         >
           {!mobile && <View style={tw("mt-5")}></View>}
-          {userProducts?.length > 0 && <MyBooks books={userProducts} />}
+          <MyBooks books={userProducts} />
           <View style={tw("px-4 w-full")}>
             <Header title={"فروشگاه"} route={"Products"} />
           </View>
-          {books?.length > 0 && <Scroll books={books} />}
+          <Scroll books={books} />
-          {books?.length > 0 && <Videos videos={books} />}
+          <Videos videos={books} />
-          {blogs?.length > 0 && <Blogs blogs={blogs} />}
+          <Blogs blogs={blogs} />
         </ScrollView>
       </SafeAreaView>
   );

src/screens/Product/components/Book.js

@@ -9,6 +9,7 @@ import {
   Appearance,
   Pressable,
   Platform,
+  ActivityIndicator
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { product, userProduct } from "../../../redux/actions";
@@ -35,7 +36,15 @@ import Colors from "../../../constants/Colors";
 const { height, width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-function Book({ book, grades, pushToCart, userId, loading, mobile }) {
+function Book({
+  book,
+  grades,
+  pushToCart,
+  userId,
+  loading,
+  mobile,
+  userProducts,
+}) {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const [type, setType] = useState(1);
@@ -49,6 +58,14 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
     }, 500);
   }, [type]);
 
+  const physicalAvailabileInCart = userProducts?.filter(
+    (product) => product?.productId === book?.product[1]?.id
+  )[0];
+
+  const digitalAvailabileInCart = userProducts?.filter(
+    (product) => product?.productId === book?.product[0]?.id
+  )[0];
+
   return (
     <ScrollView style={[tw("flex flex-col flex-1 relative")]}>
       {!mobile && <View style={tw("mt-5")}></View>}
@@ -69,10 +86,12 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
       )}
       {imageSlider && <ImageSlider />}
       <View style={tw("flex flex-row-reverse")}>
-        
         <Image
           source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
-            style={[tw("rounded-md"), { height : height / 4, width : height / 4 * 3 / 4}]}
+          style={[
+            tw("rounded-md"),
+            { height: height / 4, width: ((height / 4) * 3) / 4 },
+          ]}
         />
 
         <View
@@ -190,7 +209,9 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
       <View style={tw("flex flex-row-reverse justify-between flex-wrap py-3")}>
         <Pressable
           style={[
-            tw("flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"),
+            tw(
+              "flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"
+            ),
             {
               borderWidth: 1,
               borderColor: Colors.theme1[colorScheme].greenCF,
@@ -215,8 +236,9 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
           >
             خرید نسخه فیزیکی کتاب
           </Text>
-          <View style={tw("flex flex-row-reverse")}>
+          <View style={tw("flex flex-row-reverse items-center")}>
-            <View style={tw("w-px h-full bg-green-500")}></View>
+            <View style={tw("w-px h-full bg-green-300")}></View>
+            <View style={tw("flex")}>
               <Text
                 style={[
                   tw("py-1 pr-2"),
@@ -231,6 +253,96 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
               >
                 {separate(book?.product[1]?.price) + " " + "تومان"}
               </Text>
+              {physicalAvailabileInCart && (
+                <View
+                  style={tw(
+                    `flex items-center pl-3 ${
+                      ios ? "flex-row-reverse" : "flex-row-reverse"
+                    }`
+                  )}
+                >
+                  <Pressable
+                    onPress={() =>
+                      pushToCart({
+                        productId: physicalAvailabileInCart?.productId,
+                        userId: physicalAvailabileInCart.userId,
+                        count: 1,
+                      })
+                    }
+                    style={[
+                      tw(
+                        `rounded-md py-0 flex flex-row justify-center items-center border ${
+                          mobile ? "px-1.5" : "px-3"
+                        }`
+                      ),
+                      {
+                        borderColor: Colors.theme1[colorScheme].green79,
+                      },
+                    ]}
+                  >
+                    <Text
+                      style={{
+                        fontSize: mobile ? fontSize.tiny : fontSize.xl4,
+                        color: Colors.theme1[colorScheme].green79,
+                        fontFamily: "bold",
+                      }}
+                    >
+                      +
+                    </Text>
+                  </Pressable>
+                  {loading ? (
+                    <ActivityIndicator
+                      style={tw("mx-1.5 my-3")}
+                      size="small"
+                      color={Colors.theme1[colorScheme].greenBA}
+                    />
+                  ) : (
+                    <Text
+                      style={[
+                        tw("mx-1.5"),
+                        {
+                          fontSize: fontSize.xl6,
+                          color: Colors.theme1[colorScheme].green79,
+                          fontFamily: "bold",
+                        },
+                      ]}
+                    >
+                      {physicalAvailabileInCart?.count}
+                    </Text>
+                  )}
+
+                  <Pressable
+                    onPress={() =>
+                      pushToCart({
+                        productId: physicalAvailabileInCart?.productId,
+                        userId: physicalAvailabileInCart?.userId,
+                        count: -1,
+                      })
+                    }
+                    style={[
+                      tw(
+                        `rounded-md  flex flex-row justify-center items-center border ${
+                          mobile ? "px-2" : "px-3.5"
+                        }`
+                      ),
+                      {
+                        borderColor: Colors.theme1[colorScheme].green79,
+                      },
+                    ]}
+                  >
+                    <Text
+                      style={{
+                        fontSize: mobile ? fontSize.tiny : fontSize.xl4,
+                        color: Colors.theme1[colorScheme].green79,
+                        fontFamily: "demi",
+                      }}
+                    >
+                      -
+                    </Text>
+                  </Pressable>
+                </View>
+              )}
+            </View>
           </View>
         </Pressable>
         <Pressable
@@ -261,8 +373,7 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
           >
             خرید نسخه دیجیتال کتاب
           </Text>
-          <View style={tw("flex flex-row-reverse")}>
+          <View style={tw("flex")}>
-            <View style={tw("w-px h-full bg-green-500")}></View>
               <Text
                 style={[
                   tw("py-1 pr-2"),
@@ -277,6 +388,95 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
               >
                 {separate(book?.product[0]?.price) + " " + "تومان"}
               </Text>
+              {digitalAvailabileInCart && (
+                <View
+                  style={tw(
+                    `flex items-center pl-3 ${
+                      ios ? "flex-row-reverse" : "flex-row-reverse"
+                    }`
+                  )}
+                >
+                  <Pressable
+                    onPress={() =>
+                      pushToCart({
+                        productId: digitalAvailabileInCart?.productId,
+                        userId: digitalAvailabileInCart.userId,
+                        count: 1,
+                      })
+                    }
+                    style={[
+                      tw(
+                        `rounded-md py-0 flex flex-row justify-center items-center border ${
+                          mobile ? "px-1.5" : "px-3"
+                        }`
+                      ),
+                      {
+                        borderColor: Colors.theme1[colorScheme].green79,
+                      },
+                    ]}
+                  >
+                    <Text
+                      style={{
+                        fontSize: mobile ? fontSize.tiny : fontSize.xl4,
+                        color: Colors.theme1[colorScheme].green79,
+                        fontFamily: "bold",
+                      }}
+                    >
+                      +
+                    </Text>
+                  </Pressable>
+                  {loading ? (
+                    <ActivityIndicator
+                      style={tw("mx-1.5 my-3")}
+                      size="small"
+                      color={Colors.theme1[colorScheme].greenBA}
+                    />
+                  ) : (
+                    <Text
+                      style={[
+                        tw("mx-1.5"),
+                        {
+                          fontSize: fontSize.xl6,
+                          color: Colors.theme1[colorScheme].green79,
+                          fontFamily: "bold",
+                        },
+                      ]}
+                    >
+                      {digitalAvailabileInCart?.count}
+                    </Text>
+                  )}
+
+                  <Pressable
+                    onPress={() =>
+                      pushToCart({
+                        productId: digitalAvailabileInCart?.productId,
+                        userId: digitalAvailabileInCart?.userId,
+                        count: -1,
+                      })
+                    }
+                    style={[
+                      tw(
+                        `rounded-md  flex flex-row justify-center items-center border ${
+                          mobile ? "px-2" : "px-3.5"
+                        }`
+                      ),
+                      {
+                        borderColor: Colors.theme1[colorScheme].green79,
+                      },
+                    ]}
+                  >
+                    <Text
+                      style={{
+                        fontSize: mobile ? fontSize.tiny : fontSize.xl4,
+                        color: Colors.theme1[colorScheme].green79,
+                        fontFamily: "demi",
+                      }}
+                    >
+                      -
+                    </Text>
+                  </Pressable>
+                </View>
+              )}
             </View>
         </Pressable>
         <Pressable
@@ -422,6 +622,7 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
 }
 
 const mapStateToProps = (state) => ({
+  userProducts: state.userProduct.list,
   userId: state.user.status?.id,
   loading: state.userProduct.loading,
   mobile: state.publicApi.mobile,