+
+
diff --git a/src/components/product/Product.tsx b/src/components/product/Product.tsx
index 02f9bc88..d24de3b0 100644
--- a/src/components/product/Product.tsx
+++ b/src/components/product/Product.tsx
@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from '../../store/store';
import { createCart, getUserCarts } from "../../store/features/carts/cartSlice";
import { addProductToWishlist, removeProductFromWishlist, fetchWishlistProducts } from '../../store/features/wishlist/wishlistSlice';
import { toast } from "react-toastify";
+import aos from "aos"
interface ProductProps {
id: string;
@@ -36,6 +37,9 @@ const Product: React.FC
= ({
const isProductInWishlist = wishlist.some((item: any) => item.id === id);
const [isInWishlist, setIsInWishlist] = useState(isProductInWishlist);
+ useEffect(()=>{
+ aos.init({ once: true });
+ },[]);
useEffect(() => {
setIsInWishlist(isProductInWishlist);
}, [isProductInWishlist]);
@@ -142,7 +146,7 @@ const Product: React.FC = ({
return (
-
+
{
const { products, isError, isSuccess, isLoading, message } = useAppSelector(
(state: any) => state.products
);
+ const [visibleProducts, setVisibleProducts] = useState
(20);
useEffect(() => {
dispatch(fetchProducts());
}, [dispatch]);
@@ -60,6 +61,10 @@ const LandingPage: React.FC = () => {
checkProductToCartPending();
}, []);
+ const handleLoadMore = () => {
+ setVisibleProducts((prevVisibleProducts) => prevVisibleProducts + 20);
+ };
+
return (
<>
@@ -81,7 +86,9 @@ const LandingPage: React.FC = () => {
{isSuccess &&
Array.isArray(products) &&
- products?.map((product: any) => (
+ products
+ .slice(0,visibleProducts)
+ .map((product: any) => (
{
/>
))}
+
+
)}
)}
diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
index a22ec25d..39aa692d 100644
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -21,6 +21,8 @@ const ProductsPage: React.FC = () => {
const [maxPrice, setMaxPrice] = useState(0);
const [minPrice, setMinPrice] = useState(0);
+ const [visibleProducts, setVisibleProducts] = useState
(20);
+
useEffect(() => {
dispatch(fetchProducts());
}, [dispatch]);
@@ -81,6 +83,10 @@ const ProductsPage: React.FC = () => {
return price >= priceRange[0] && price <= priceRange[1];
});
+ const handleLoadMore = () => {
+ setVisibleProducts((prevVisibleProducts) => prevVisibleProducts + 20);
+ };
+
return (
<>
@@ -116,7 +122,9 @@ const ProductsPage: React.FC = () => {
{isSuccess &&
Array.isArray(filteredProducts) &&
- filteredProducts.map((product: any) => (
+ filteredProducts
+ .slice(0,visibleProducts)
+ .map((product: any) => (
{
/>
))}
+
+
)}
diff --git a/src/pages/UserCartPaymentSuccess.tsx b/src/pages/UserCartPaymentSuccess.tsx
new file mode 100644
index 00000000..1ac0c846
--- /dev/null
+++ b/src/pages/UserCartPaymentSuccess.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React, { useEffect, useState } from 'react';
+import { Meta } from '../components/Meta';
+import { useAppDispatch, useAppSelector } from '../store/store';
+import { PuffLoader, PulseLoader } from 'react-spinners';
+import { toast } from 'react-toastify';
+import { checkout, getUserCarts } from '../store/features/carts/cartSlice';
+import {
+ FaCheckSquare,
+ FaMinus,
+ FaPlus,
+ FaEdit,
+ FaTrash,
+ FaGift,
+ FaShippingFast,
+} from 'react-icons/fa';
+import { useNavigate } from 'react-router-dom';
+import Product from '../components/product/Product';
+import { Box, LinearProgress } from '@mui/material';
+import { useLocation } from 'react-router-dom';
+
+const UserCartPaymentSuccess: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const [isLoading, setIsLoading] = useState(true);
+ const [currentEndpoint, setCurrentEndpoint] = useState('');
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ useEffect(() => {
+ toast.success('Cart payment success');
+ navigate('/shopping-cart');
+ }, [location.search, navigate]);
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default UserCartPaymentSuccess;
diff --git a/src/pages/UserLogin.tsx b/src/pages/UserLogin.tsx
index b708838a..f0c9979c 100644
--- a/src/pages/UserLogin.tsx
+++ b/src/pages/UserLogin.tsx
@@ -1,24 +1,24 @@
/* eslint-disable */
-import React, { useEffect, useRef, useState } from "react";
-import { FcGoogle } from "react-icons/fc";
-import { BiSolidShow } from "react-icons/bi";
-import { BiSolidHide } from "react-icons/bi";
-import { useAppDispatch, useAppSelector } from "../store/store";
-import { loginUser } from "../store/features/auth/authSlice";
-import { toast } from "react-toastify";
-import { useFormik } from "formik";
-import * as Yup from "yup";
-import { Link, useNavigate } from "react-router-dom";
-import { PulseLoader } from "react-spinners";
-import { addProductToWishlist } from "../store/features/wishlist/wishlistSlice";
-import authService from "../store/features/auth/authService";
+import React, { useEffect, useRef, useState } from 'react';
+import { FcGoogle } from 'react-icons/fc';
+import { BiSolidShow } from 'react-icons/bi';
+import { BiSolidHide } from 'react-icons/bi';
+import { useAppDispatch, useAppSelector } from '../store/store';
+import { loginUser } from '../store/features/auth/authSlice';
+import { toast } from 'react-toastify';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { Link, useNavigate } from 'react-router-dom';
+import { PulseLoader } from 'react-spinners';
+import { addProductToWishlist } from '../store/features/wishlist/wishlistSlice';
+import authService from '../store/features/auth/authService';
import { joinRoom } from '../utils/socket/socket';
const LoginSchema = Yup.object().shape({
email: Yup.string()
- .email("Email must be valid")
- .required("Email is required"),
- password: Yup.string().required("Password is required"),
+ .email('Email must be valid')
+ .required('Email is required'),
+ password: Yup.string().required('Password is required'),
});
function UserLogin() {
@@ -39,35 +39,39 @@ function UserLogin() {
const formik = useFormik({
initialValues: {
- email: "",
- password: "",
+ email: '',
+ password: '',
},
validationSchema: LoginSchema,
onSubmit: async (values) => {
+ const { email } = values;
+ localStorage.setItem('loggedEmail', email);
const action = await dispatch(loginUser(values));
if (loginUser.fulfilled.match(action)) {
- const pendingWishlistProduct = localStorage.getItem("pendingWishlistProduct");
+ const pendingWishlistProduct = localStorage.getItem(
+ 'pendingWishlistProduct'
+ );
if (pendingWishlistProduct) {
await dispatch(addProductToWishlist(pendingWishlistProduct));
- localStorage.removeItem("pendingWishlistProduct");
+ localStorage.removeItem('pendingWishlistProduct');
}
}
- }
+ },
});
useEffect(() => {
- const token = localStorage.getItem("token");
+ const token = localStorage.getItem('token');
if (token) {
- navigate("/home");
+ navigate('/home');
}
}, [navigate]);
useEffect(
function () {
if (isSuccess && token && isAuthenticated) {
- localStorage.setItem("token", token);
+ localStorage.setItem('token', token);
toast.success(message);
- navigate("/home");
+ navigate('/home');
formik.resetForm();
joinRoom(token);
}
@@ -121,7 +125,7 @@ function UserLogin() {
)
) : (
- ""
+ ''
)}
@@ -161,11 +165,11 @@ function UserLogin() {
) : null}
@@ -186,4 +190,4 @@ function UserLogin() {
);
}
-export default UserLogin;
\ No newline at end of file
+export default UserLogin;
diff --git a/src/pages/UserViewCart.tsx b/src/pages/UserViewCart.tsx
index c9a52fb4..ff423333 100644
--- a/src/pages/UserViewCart.tsx
+++ b/src/pages/UserViewCart.tsx
@@ -11,6 +11,10 @@ import {
createCart,
clearCart,
clearCartProduct,
+ createProductStripe,
+ createSessionStripe,
+ updateCartStatus,
+ userSaveOrder,
} from "../store/features/carts/cartSlice";
import {
FaCheckSquare,
@@ -32,6 +36,8 @@ import Product from "../components/product/Product";
import { Box, LinearProgress } from "@mui/material";
import Button from "@mui/material/Button";
import Dispatch from "react";
+import { fetchUserProfile } from "../store/features/user/userSlice";
+import { useLocation } from "react-router-dom";
const UserViewCart: React.FC = () => {
const dispatch = useAppDispatch();
@@ -40,46 +46,184 @@ const UserViewCart: React.FC = () => {
const [cartData, setCartData] = useState(null);
const [cartResponseData, setCartResponseData] = useState(null);
const [isLoggedOut, setIsLoggedOut] = useState(false);
- const [checkoutData, setcheckoutData] = useState(null);
+ const [checkoutData, setCheckoutData] = useState(null);
const [isCheckoutSuccess, setCheckoutSuccess] = useState(null);
const [isPreloader, setIsPreloader] = useState(false);
const [discount, setDiscount] = useState(0);
const [totalProductPrice, setTotalProductPrice] = useState(0);
- const [arrayOfProduct, setarrayOfProduct] = useState(null);
+ const [arrayOfProduct, setArrayOfProduct] = useState(null);
const [quantities, setQuantities] = useState<{ [key: string]: number }>({});
const [open, setOpen] = useState(false);
+ const [cartToPay, setCartToPay] = useState(null);
+ const [amountToPay, setAmountToPay] = useState(null);
+ const [stripePrice, setStripePrice] = useState("");
+ const [currentEndpoint, setCurrentEndpoint] = useState("");
const navigate = useNavigate();
+ const location = useLocation();
const cartState = useAppSelector((state) => state.cart);
useEffect(() => {
- const fetchCarts = async () => {
- try {
- setIsLoading(true);
- const response = await dispatch(getUserCarts());
- const response1 = await dispatch(getUserCarts()).unwrap();
- if (response.payload === "Not authorized") {
- setIsLoggedOut(true);
- toast.error("Please login first");
- navigate("/login");
- }
- setCartResponseData(response1.data);
- setIsLoading(false);
- } catch (error: any) {
- if (error === "Not authorized") {
- setIsLoggedOut(true);
- toast.error("Please login first");
- navigate("/login");
- }
- console.error("Error fetching carts:", error);
- setIsLoading(false);
- setIsError(true);
- toast.error(error.message);
- }
- };
fetchCarts();
+ checkPayFailOrSuccess();
}, [dispatch]);
+ const fetchCarts = async () => {
+ try {
+ setIsLoading(true);
+ const response = await dispatch(getUserCarts());
+ const response1 = await dispatch(getUserCarts()).unwrap();
+ if (response.payload === "Not authorized") {
+ setIsLoggedOut(true);
+ toast.error("Please login first");
+ navigate("/login");
+ }
+ setCartResponseData(response1.data);
+ setIsLoading(false);
+ } catch (error: any) {
+ if (error === "Not authorized") {
+ setIsLoggedOut(true);
+ toast.error("Please login first");
+ navigate("/login");
+ }
+ console.error("Error fetching carts:", error);
+ setIsLoading(false);
+ setIsError(true);
+ toast.error(error.message);
+ }
+ };
+ const handleCartCheckOut = async (
+ cartId: string,
+ index: number,
+ productsArr: Array<{
+ name: string;
+ description: string;
+ image: string;
+ price: string;
+ shopId: string;
+ }>
+ ) => {
+ setIsPreloader(true);
+ try {
+ const response = await dispatch(checkout(cartId));
+ if (!response.payload) {
+ throw new Error(
+ "Checkout failed, Check your internet connection or try again later"
+ );
+ }
+ localStorage.setItem("cartToPay", cartId);
+
+ localStorage.setItem("productsToSave", JSON.stringify(productsArr));
+ const totalCartAmount = response.payload.data.totalAmount;
+ const array = cartResponseData.carts[index];
+
+ setArrayOfProduct(array);
+ setCheckoutData(totalCartAmount);
+
+ const totalProductPrice = array.products.reduce(
+ (acc, product) => acc + parseFloat(product.price),
+ 0
+ );
+ setTotalProductPrice(totalProductPrice);
+
+ const names = productsArr.map((product) => product.name).join(", ");
+ const descriptions = productsArr
+ .map((product) => product.description)
+ .join(", ");
+ const image1 = productsArr[0]?.image;
+ const image2 = productsArr[1]?.image;
+ const shopidToSave: any = productsArr[0]?.shopId;
+ localStorage.setItem("shopIdToSave", shopidToSave);
+
+ const unit_amount = Math.round(totalCartAmount * 100);
+
+ setAmountToPay(unit_amount);
+ const stripeProduct = await dispatch(
+ createProductStripe({
+ name: names,
+ description: descriptions,
+ image1,
+ image2,
+ unit_amount: unit_amount,
+ })
+ );
+ console.log(stripeProduct);
+ localStorage.setItem(
+ "stripePrice",
+ stripeProduct.payload.data.product.default_price
+ );
+
+ setCheckoutSuccess(true);
+
+ toast.success("Checkout is done Successfully");
+ } catch (error) {
+ console.error("Checkout failed", error);
+ toast.error("Checkout failed");
+ } finally {
+ setIsPreloader(false);
+ }
+ };
+
+ const handlePayCart = async () => {
+ try {
+ setIsPreloader(true);
+ const profile: any = await dispatch(fetchUserProfile());
+ const data = {
+ successUrl:
+ "https://e-commerce-ninja-fn-staging.netlify.app/shopping-cart?success",
+ cancelUrl:
+ "https://e-commerce-ninja-fn-staging.netlify.app/shopping-cart?cancel",
+ customerEmail: profile.payload.email,
+ price: localStorage.getItem("stripePrice"),
+ };
+ const response = await dispatch(createSessionStripe(data));
+ const url = response.payload.data.session.url;
+ window.location.href = url;
+ } catch (error) {
+ console.error("Checkout failed", error);
+ toast.error("Payment initialization failed, try again later");
+ } finally {
+ setIsPreloader(false);
+ }
+ };
+
+ const checkPayFailOrSuccess = async () => {
+ const params = window.location.search.slice(1);
+ if (params === "success") {
+ setIsPreloader(true);
+ const cartId = localStorage.getItem("cartToPay");
+ const products = localStorage.getItem("productsToSave");
+ const shopId = localStorage.getItem("shopIdToSave");
+ if (!cartId || !products || !shopId) {
+ navigate("/shopping-cart");
+ toast.error("Unknown error occurred saving order");
+ return;
+ }
+ const data = {
+ cartId: cartId,
+ status: "Paid",
+ };
+ const cartStatus = await dispatch(updateCartStatus(data));
+ const order = await dispatch(
+ userSaveOrder({
+ cartId: cartId,
+ paymentMethodId: "Stripe",
+ products: products,
+ shopId: shopId,
+ })
+ );
+ toast.success("Cart Payment successful");
+ localStorage.removeItem("cartToPay");
+ localStorage.removeItem("productsToSave");
+ localStorage.removeItem("shopIdToSave");
+ navigate("/shopping-cart");
+ setIsPreloader(false);
+ } else if (params === "cancel") {
+ toast.error("Payment cancelled successfully");
+ navigate("/shopping-cart");
+ setIsPreloader(false);
+ }
+ };
if (isLoading) {
return (
@@ -92,7 +236,7 @@ const UserViewCart: React.FC = () => {
if (isError) {
return (
-
Failed to load cart products. Please try again later.
+
No cart found.
)}
+