release with patches

vickkie · Aug 3, 2024 · 7f07178 · 7f07178
1 parent 9c1b823
commit 7f07178
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 21 deletions.
diff --git a/assets/data/cartempty.json b/assets/data/cartempty.json
diff --git a/assets/data/nodata.json b/assets/data/nodata.json
diff --git a/components/bottomsheets/HomeMenu.jsx b/components/bottomsheets/HomeMenu.jsx
@@ -72,7 +72,7 @@ const HomeMenu = forwardRef((props, ref) => {
       ref={bottomSheetRef}
       index={1}
       snapPoints={snapPoints}
-      onChange={(index) => console.log("Changed", index)}
+      onChange={(index) => {}}
       enablePanDownToClose={true}
       backgroundStyle={{ backgroundColor: COLORS.themeg, borderRadius: SIZES.medium }}
       backdropComponent={renderBackdrop}

diff --git a/components/cart/CartCardVIew.jsx b/components/cart/CartCardVIew.jsx
@@ -7,6 +7,7 @@ import useUpdate from "../../hook/useUpdate";
 import { AuthContext } from "../auth/AuthContext";
 import useDelete from "../../hook/useDelete";
 import usePost from "../../hook/usePost";
+import Toast from "react-native-toast-message";
 
 const CartCardView = memo(({ item, handleRefetch, onUpdateTotal }) => {
   const navigation = useNavigation();
@@ -44,6 +45,15 @@ const CartCardView = memo(({ item, handleRefetch, onUpdateTotal }) => {
     }
   }, [deleteStatus, errorStatus]);
 
+  const showToast = (type, text1, text2) => {
+    Toast.show({
+      type: type,
+      text1: text1,
+      text2: text2 ? text2 : "",
+      visibilityTime: 3000,
+    });
+  };
+
   const increment = () => {
     const newCount = count + 1;
     setCount(newCount);
@@ -77,10 +87,10 @@ const CartCardView = memo(({ item, handleRefetch, onUpdateTotal }) => {
       try {
         addCart(cartData);
         if (updateStatus == 200) {
-          console.log("item with id ", id, "added");
+          showToast("success", "Added to Wishlist", "Item added to your favourites");
         }
       } catch (error) {
-        console.log(error);
+        showToast("error", "Item was not added to Wishlist", "Try again later");
       }
     }
   };

diff --git a/components/cart/CartList.jsx b/components/cart/CartList.jsx
@@ -6,6 +6,7 @@ import CartCardVIew from "./CartCardVIew";
 import useFetch from "../../hook/useFetch";
 import { AuthContext } from "../auth/AuthContext";
 import { useNavigation } from "@react-navigation/native";
+import LottieView from "lottie-react-native";
 
 const CartList = ({ onItemCountChange }) => {
   const { userData, userLogin } = useContext(AuthContext);
@@ -16,6 +17,7 @@ const CartList = ({ onItemCountChange }) => {
   const [additionalFees, setAdditionalFees] = useState(0);
   const [itemCount, setItemCount] = useState(0);
 
+  // Set userId based on login status
   useEffect(() => {
     if (!userLogin) {
       setUserId(1);
@@ -24,8 +26,10 @@ const CartList = ({ onItemCountChange }) => {
     }
   }, [userLogin, userData]);
 
+  // Fetch cart data
   const { data, isLoading, error, refetch } = useFetch(`carts/find/${userId}`);
 
+  // Calculate totals when data is fetched
   useEffect(() => {
     if (!isLoading && data.length !== 0) {
       const products = data[0]?.products || [];
@@ -49,6 +53,7 @@ const CartList = ({ onItemCountChange }) => {
 
   const estimatedAmount = (totals.subtotal || 0) + (additionalFees || 0);
 
+  // Notify parent component about item count change
   useEffect(() => {
     onItemCountChange(itemCount);
   }, [itemCount, onItemCountChange]);
@@ -64,14 +69,20 @@ const CartList = ({ onItemCountChange }) => {
     }));
   };
 
+  // Loading state
   if (isLoading) {
     return (
-      <View style={styles.errorcontainer}>
-        <ActivityIndicator size="large" color={COLORS.primary} />
+      <View style={styles.containerx}>
+        <View style={styles.containLottie}>
+          <View style={styles.animationWrapper}>
+            <LottieView source={require("../../assets/data/loading.json")} autoPlay loop style={styles.animation} />
+          </View>
+        </View>
       </View>
     );
   }
 
+  // Error state
   if (error) {
     return (
       <View style={styles.errorcontainer}>
@@ -85,6 +96,30 @@ const CartList = ({ onItemCountChange }) => {
 
   const products = data[0]?.products || [];
 
+  // Empty cart state
+  if (products.length === 0) {
+    return (
+      <View style={styles.containerx}>
+        <View style={styles.containLottie}>
+          <View style={styles.animationWrapper}>
+            <LottieView
+              source={require("../../assets/data/cartempty.json")}
+              autoPlay
+              loop={false}
+              style={styles.animation}
+            />
+          </View>
+          <View style={{ marginTop: 0, paddingBottom: 10 }}>
+            <Text style={{ fontFamily: "GtAlpine", fontSize: SIZES.medium }}>
+              "Oops, your cart is empty. Let's fix that!
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Cart items list
   return (
     <View>
       <View style={styles.container}>
@@ -100,6 +135,8 @@ const CartList = ({ onItemCountChange }) => {
           )}
         />
       </View>
+
+      {/* Subtotal and Checkout */}
       <View style={styles.subtotalWrapper}>
         <View style={styles.topSubtotal}>
           <Text style={styles.additionalHeader}>Subtotal amount</Text>

diff --git a/components/cart/cartlist.style.js b/components/cart/cartlist.style.js
@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
     borderRadius: SIZES.medium,
   },
+
   none: {
     display: "none",
   },
@@ -104,6 +105,31 @@ const styles = StyleSheet.create({
     fontFamily: "semibold",
     fontSize: SIZES.large,
   },
+  containLottie: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: SIZES.width - 20,
+    flex: 1,
+  },
+  animationWrapper: {
+    width: 200,
+    height: 200,
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  animation: {
+    width: "100%",
+    height: "100%",
+  },
+  containerx: {
+    minHeight: SIZES.height - 300,
+    backgroundColor: COLORS.themeg,
+    marginTop: 260,
+    width: SIZES.width - 20,
+    marginHorizontal: 10,
+    borderRadius: SIZES.medium,
+  },
 });
 
 export default styles;
diff --git a/components/favourites/FavouritesList.jsx b/components/favourites/FavouritesList.jsx
@@ -8,6 +8,7 @@ import { useNavigation } from "@react-navigation/native";
 import useFetch from "../../hook/useFetch";
 import { useCart } from "../../contexts/CartContext";
 import { useWish } from "../../contexts/WishContext";
+import LottieView from "lottie-react-native";
 
 const FavouritesList = ({ onWishCountChange, onItemCountChange }) => {
   const { userData, userLogin } = useContext(AuthContext);
@@ -70,15 +71,33 @@ const FavouritesList = ({ onWishCountChange, onItemCountChange }) => {
     handleWishCountChange(favouriteCount);
   }, [favouriteCount, onWishCountChange]);
 
+  const products = (data && data.products) || [];
   if (isLoading) {
     return (
-      <View style={styles.errorcontainer}>
-        <ActivityIndicator size="large" color={COLORS.primary} />
+      <View style={styles.containerx}>
+        <View style={styles.containLottie}>
+          <View style={styles.animationWrapper}>
+            <LottieView source={require("../../assets/data/loading.json")} autoPlay loop style={styles.animation} />
+          </View>
+        </View>
       </View>
     );
   }
 
-  const products = (data && data.products) || [];
+  if (products.length === 0) {
+    return (
+      <View style={styles.containerx}>
+        <View style={styles.containLottie}>
+          <View style={styles.animationWrapper}>
+            <LottieView source={require("../../assets/data/nodata.json")} autoPlay loop style={styles.animation} />
+          </View>
+          <View style={{ marginTop: 0, paddingBottom: 10 }}>
+            <Text style={{ fontFamily: "GtAlpine", fontSize: SIZES.medium }}>Empty, Find and save items you like!</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
 
   return (
     <View>

diff --git a/components/favourites/favourtiteslist.style.js b/components/favourites/favourtiteslist.style.js
@@ -101,6 +101,31 @@ const styles = StyleSheet.create({
     fontFamily: "semibold",
     fontSize: SIZES.large,
   },
+  containLottie: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: SIZES.width - 20,
+    flex: 1,
+  },
+  animationWrapper: {
+    width: 200,
+    height: 200,
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  animation: {
+    width: "100%",
+    height: "100%",
+  },
+  containerx: {
+    minHeight: SIZES.height - 200,
+    backgroundColor: COLORS.themeg,
+    marginTop: 180,
+    width: SIZES.width - 20,
+    marginHorizontal: 10,
+    borderRadius: SIZES.medium,
+  },
 });
 
 export default styles;
diff --git a/components/products/ProductsCardView.jsx b/components/products/ProductsCardView.jsx
@@ -73,10 +73,9 @@ const ProductsCardView = ({ item }) => {
         favouriteItem: item._id,
       };
       try {
-        await addFavourite(cartData);
-        if (updateStatus === 200) {
-          showToast("success", "Success", "Added to your wishlist");
-        }
+        addFavourite(cartData);
+
+        showToast("success", "Added to your wishlist", "Item was successfully added");
       } catch (error) {
         // console.log(error);
         showToast("error", "Ooops, Failed to add to Wishlist", "Try again later");

diff --git a/screens/Cart.jsx b/screens/Cart.jsx
@@ -13,6 +13,11 @@ const Cart = () => {
   const { userLogin, userData } = React.useContext(AuthContext);
   const { itemCount, handleItemCountChange } = useCart();
 
+  const capitalizeFirstLetter = (string) => {
+    if (!string) return "";
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.wrapper}>
@@ -45,7 +50,11 @@ const Cart = () => {
             <View style={styles.location}>
               <TouchableOpacity style={styles.locationName}>
                 <Icon name="location" size={24} />
-                {userLogin ? <Text>{userData.location}</Text> : <Text> Nairobi</Text>}
+                {userLogin ? (
+                  <Text style={{ marginLeft: 6 }}>{capitalizeFirstLetter(userData.location)}</Text>
+                ) : (
+                  <Text> Nairobi</Text>
+                )}
               </TouchableOpacity>
               <TouchableOpacity style={styles.rightLocation} onPress={() => navigation.navigate("UserDetails")}>
                 <Text>change</Text>
@@ -83,7 +92,7 @@ const styles = StyleSheet.create({
     fontSize: SIZES.medium,
     textAlign: "center",
     color: COLORS.themeb,
-    fontFamily: "semibold",
+    fontFamily: "GtAlpine",
   },
   container: {
     flex: 1,

diff --git a/screens/Orders.jsx b/screens/Orders.jsx
@@ -15,9 +15,10 @@ import Icon from "../constants/icons";
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import { AuthContext } from "../components/auth/AuthContext";
 import LottieView from "lottie-react-native";
-import useFetch from "../hook/useFetch";
 import { BACKEND_PORT } from "@env";
 import { StatusBar } from "expo-status-bar";
+import * as Clipboard from "expo-clipboard";
+import Toast from "react-native-toast-message";
 
 const Orders = () => {
   const [userId, setUserId] = useState(null);
@@ -114,7 +115,7 @@ const Orders = () => {
   const primaryData = [
     {
       id: "1",
-      title: "Premium Box Packing",
+      title: "Order tracker",
       image: require("../assets/images/isometric.webp"),
       // shippingId: "V789456AR123",
       shippingId: last3orders[0] ? last3orders[0].id : "Order now",
@@ -124,7 +125,8 @@ const Orders = () => {
     },
     {
       id: "2",
-      title: "Small Box Packing",
+      // title: "Small Box Packing",
+      title: "Shipment Tracker",
       image: require("../assets/images/isometric2.png"),
       shippingId: last3orders[1] ? last3orders[1].id : "Order now",
       color: "#a3eed8",
@@ -133,7 +135,8 @@ const Orders = () => {
     },
     {
       id: "3",
-      title: "Gift Packing",
+      title: "Order tracker",
+      // title: "Gift Packing",
       image: require("../assets/images/gift.webp"),
       color: "#e6bfdf",
       shippingId: last3orders[2] ? last3orders[2].id : "Order now",
@@ -189,7 +192,19 @@ const Orders = () => {
     return filterOrdersBySearchQuery(statusFiltered);
   }, [filterOrdersByStatus, filterOrdersBySearchQuery]);
 
-  // const filteredOrders = filterOrdersBySearchQuery(filterOrdersByStatus());
+  const showToast = (type, text1, text2) => {
+    Toast.show({
+      type: type,
+      text1: text1,
+      text2: text2 ? text2 : "",
+      visibilityTime: 3000,
+    });
+  };
+
+  const handleCopy = async (shippingId) => {
+    await Clipboard.setStringAsync(shippingId);
+    showToast("success", "Copied to clipboard", "Your order tracking number has been copied to clipboard");
+  };
 
   const Card = ({ title, image, shippingId, color, stylez }) => {
     const parsedStyle = stylez ? JSON.parse(stylez) : {};
@@ -208,7 +223,13 @@ const Orders = () => {
           <View style={{ gap: 10, flexDirection: "column" }}>
             <Text style={styles.title}>{title}</Text>
             <View style={{ alignSelf: "flex-start" }}>
-              <Text style={styles.shippingId}>{`ID: ${shippingId}`}</Text>
+              <TouchableOpacity
+                onPress={() => {
+                  handleCopy(shippingId);
+                }}
+              >
+                <Text style={styles.shippingId}>{`ID: ${shippingId}`}</Text>
+              </TouchableOpacity>
             </View>
           </View>
           <View>