Feature/chienbm fe

AppNavigator.js

@@ -85,7 +85,7 @@ export default function AppNavigator() {
           component={Category}
           options={{
             resetOnBlur: true,
-            headerShown: false,
+
           }}
         />
         <Stack.Screen name="ResetPassword" component={ResetPassword} />

Screen/Category.js

@@ -5,7 +5,7 @@ import {View, Text, StyleSheet} from 'react-native';
 export default function Category(){
 return(
      <View style={style.container}>
-          <Text>This is screen Category</Text>
+          <Text>This is screen Category.</Text>
      </View>
 )
 }

Screen/ConfirmationOrder/ConfirmationOrder.js

@@ -85,24 +85,34 @@ const ConfirmationOrder = (props) => {
       console.log("selectedOption", selectedOption);
       if (selectedOption === "card") {
         paymentmethod = 2;
+        const rewardType3Exists = state.UseVoucher.some(
+          (voucher) => voucher.reward_type === 3
+        );
+
         navigation.navigate("VerifyVnPayPayMent", {
           cartItems: Orderdata.item_id,
           cartId: Orderdata.Cart_id,
           totalPrice: calculateTotalPayment(),
           shippingAddressId: addresses[0]?.id,
           paymentMethodId: paymentmethod,
           voucherId: state.UseVoucher.map((voucher) => voucher.voucher_id),
+          freightCost: rewardType3Exists ? 0 : 10000,
         });
       }
       if (selectedOption === "cash") {
         paymentmethod = 1;
+        const rewardType3Exists = state.UseVoucher.some(
+          (voucher) => voucher.reward_type === 3
+        );
+
         const orderData = {
           cartItems: Orderdata.item_id,
           cartId: Orderdata.Cart_id,
           totalPrice: calculateTotalPayment(),
           shippingAddressId: addresses[0]?.id,
           paymentMethodId: paymentmethod,
           voucherIds: state.UseVoucher.map((voucher) => voucher.voucher_id),
+          freightCost: rewardType3Exists ? 0 : 10000,
         };
         const data = await Orders(orderData);
         console.log("data", data);
@@ -702,4 +712,4 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#fff",
   },
-});
+});

Screen/ConfirmationOrder/Verifyvnpaypayment.js

@@ -4,31 +4,67 @@ import { PulseIndicator } from "react-native-indicators";
 import { useNavigation } from "@react-navigation/native";
 import FontAwesome from "react-native-vector-icons/FontAwesome";
 import { WebView } from "react-native-webview";
+import useAuth from "../../Services/auth.services";
 import axios from "axios";
+import Config from "../../Api/Config";
+import { AuthStatus } from "../../Services/AuthContext";
+import authHeader from "../../Services/auth.header";
 
-const VerifyVnPayPayment = () => {
+const VerifyVnPayPayment = (props) => {
   const navigation = useNavigation();
   const [webViewUrl, setWebViewUrl] = useState(null);
+  const { Orders } = useAuth();
+  const { state, dispatch } = AuthStatus();
+  const {
+    cartItems,
+    cartId,
+    totalPrice,
+    shippingAddressId,
+    paymentMethodId,
+    voucherId,
+    freightCost,
+  } = props.route.params;
+  console.log("cartItems", cartItems, cartId, totalPrice, shippingAddressId);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await axios.post(
-          "http://192.168.0.103:3000/api/v1/payment/vnpay/create_payment_url",
-          {
-            orderId: 1,
-            amount: "70000",
-            bankCode: "VNBANK",
-            language: "vn",
-          }
-        );
-        console.log("Payment URL response: ", response.data);
-        setWebViewUrl(response.data.url);
+        const data = await Orders(props.route.params);
+        if (data.message === "ok") {
+          const usedVoucherIds = state.UseVoucher.map(
+            (voucher) => voucher.voucher_id
+          );
+
+          // Filter out the used vouchers from the state.UseVoucher array
+          const updatedVouchers = state.UseVoucher.filter(
+            (voucher) => !usedVoucherIds.includes(voucher.voucher_id)
+          );
+
+          // Update the state with the remaining vouchers
+          dispatch({ type: "USE_VOUCHER", payload: updatedVouchers });
+          console.log("orderId", data);
+
+          const headers = await authHeader();
+          const response = await axios.post(
+            `${Config.API_BASE_URL}/payment/vnpay/create_payment_url`,
+            {
+              orderId: data.orderId,
+              amount: totalPrice,
+              bankCode: "VNBANK",
+              language: "vn",
+            }, {
+              headers: headers
+            }
+          );
+          console.log("Payment URL response: ", response.data);
+          setWebViewUrl(response.data.url);
+        }
       } catch (error) {
         console.error("Error fetching payment URL:", error);
         ToastAndroid.show("Error fetching payment URL", ToastAndroid.SHORT);
       }
     };
+
     fetchData();
   }, []);
 
@@ -52,7 +88,7 @@ const VerifyVnPayPayment = () => {
     if (response.RspCode === "00") {
       ToastAndroid.show("Thanh toán thành công", ToastAndroid.SHORT);
       navigation.navigate("Home");
-    } else if (response.RspCode === "-01") {
+    } else if (response.RspCode === "01") {
       ToastAndroid.show("Thanh toán đã bị hủy", ToastAndroid.SHORT);
       navigation.goBack();
     } else {
@@ -99,4 +135,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default VerifyVnPayPayment;
+export default VerifyVnPayPayment;

Screen/Informations/OrderInfo.js

@@ -7,15 +7,49 @@ import {
   TouchableOpacity,
   Image,
 } from "react-native";
-import change from "../../images/ReChange.png";
-import wait from "../../images/2.png";
-import ship from "../../images/3.png";
-import mess from "../../images/4.png";
-import pay from "../../images/5.png";
+import PENDING from "../../images/1.png";
+import PROCESSING from "../../images/2.png";
+import SHIPPING from "../../images/3.png";
+import SHIPPED from "../../images/4.png";
+import DELIVERED from "../../images/5.png";
+import CANCELED from "../../images/6.png";
 
-export default OrderInfo = ({ navigation }) => {
-  const hanldChoThanhToan = () => {
-
+import useAuth from "../../Services/auth.services";
+import { useEffect, useState } from "react";
+import { useNavigation } from "@react-navigation/native";
+
+export default OrderInfo = () => {
+  const { totalOrderStatus } = useAuth();
+  const [totalOrderStatusItem, setTotalOrderStatusItem] = useState([]);
+  const navigation = useNavigation();
+  const hanldChoThanhToan = (key) => {
+    navigation.navigate("MainTabPurchase", { initialTabIndex: key });
+  };
+  useEffect(() => {
+    totalOrderStatus().then((res) => {
+      setTotalOrderStatusItem(res.data);
+    });
+  }, [navigation]);
+  totalOrderStatus().then((res) => {
+    console.log("res", res);
+  });
+  const getIconByStatusId = (statusId) => {
+    switch (statusId) {
+      case 1:
+        return PROCESSING;
+      case 2:
+        return PENDING;
+      case 3:
+        return SHIPPING;
+      case 4:
+        return SHIPPED;
+      case 5:
+        return DELIVERED;
+      case 6:
+        return CANCELED;
+      default:
+        return null; // Trả về hình ảnh mặc định hoặc null nếu không tìm thấy
+    }
   };
   return (
     <View style={styles.iconsContainer}>
@@ -32,46 +66,24 @@ export default OrderInfo = ({ navigation }) => {
         </View>
       </View>
       <View style={styles.Containerinfo}>
-        <TouchableOpacity
-          style={styles.iconItem}
-          onPress={() => {
-            hanldChoThanhToan();
-          }}
-        >
-          <Image style={styles.iconImage} source={wait} />
-          <View style={styles.badge}>
-            <Text style={styles.badgeText}>29</Text>
-          </View>
-          <Text style={styles.iconText}>Chờ Thanh Toán</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.iconItem}>
-          <Image style={styles.iconImage} source={ship} />
-          <View style={styles.badge}>
-            <Text style={styles.badgeText}>29</Text>
-          </View>
-          <Text style={styles.iconText}>Chờ Vận Chuyển</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.iconItem}>
-          <Image style={styles.iconImage} source={mess} />
-          <View style={styles.badge}>
-            <Text style={styles.badgeText}>29</Text>
-          </View>
-          <Text style={styles.iconText}>Chờ Giao Hàng</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.iconItem}>
-          <Image style={styles.iconImage} source={pay} />
-          <View style={styles.badge}>
-            <Text style={styles.badgeText}>29</Text>
-          </View>
-          <Text style={styles.iconText}>Đơn đã đổi trả & hủy đơn</Text>
-        </TouchableOpacity>
-        {/* <TouchableOpacity style={styles.iconItem}>
-          <Image style={styles.iconImage} source={change} />
-          <View style={styles.badge}>
-            <Text style={styles.badgeText}>29</Text>
-          </View>
-          <Text style={styles.iconText}>Phản hồi Về Sản Phẩm</Text>
-        </TouchableOpacity> */}
+        {totalOrderStatusItem.map((item, index) => (
+          <TouchableOpacity
+            key={index}
+            style={styles.iconItem}
+            onPress={() => {
+              hanldChoThanhToan(item.status_id - 1);
+            }}
+          >
+            <Image
+              style={styles.iconImage}
+              source={getIconByStatusId(item.status_id)}
+            />
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>{item.total_orders}</Text>
+            </View>
+            <Text style={styles.iconText}>{item.status_name}</Text>
+          </TouchableOpacity>
+        ))}
       </View>
     </View>
   );
@@ -88,7 +100,7 @@ const styles = StyleSheet.create({
     width: "100%",
     paddingVertical: 5,
     paddingHorizontal: 10,
-    height: 90,
+    height: 80,
   },
 
   iconsContainer: {
@@ -100,7 +112,7 @@ const styles = StyleSheet.create({
   iconItem: {
     alignItems: "center",
     marginBottom: 20,
-    width: "20%", // Adjusted width to fit three items in a row
+    width: "15%",
   },
   iconImage: {
     width: 30,
@@ -135,7 +147,7 @@ const styles = StyleSheet.create({
   },
   badge: {
     position: "absolute",
-    right: 12,
+    right: 7,
     top: -5,
     backgroundColor: "red",
     borderRadius: 9,
@@ -148,4 +160,4 @@ const styles = StyleSheet.create({
     color: "white",
     fontSize: 10,
   },
-});
+});

Screen/Products/ListProduct.js

@@ -223,7 +223,9 @@ export default function ListProduct({ navigation }) {
     );
     return filteredProducts;
   };
-
+  const fun_productDetail = (item) => {
+    navigation.navigate("ProductDetail", { product: item });
+  };
   return (
     <SafeAreaView style={styles.container}>
       <Animated.View style={{ backgroundColor, ...styles.viewBanner }}>
@@ -300,7 +302,7 @@ export default function ListProduct({ navigation }) {
                     keyExtractor={(item) => item.id}
                     style={{ marginHorizontal: 5 }}
                     renderItem={({ item, index }) => (
-                      <ProductHorizontal item={item} index={index} />
+                      <ProductHorizontal item={item} index={index} fun_productDetail={fun_productDetail} />
                     )}
                   />
                 </View>
@@ -392,4 +394,4 @@ const styles = StyleSheet.create({
     marginTop: 100,
     alignSelf: "center",
   },
-});
+});