From 9d8978b362e1cdc3ae3528f44e0c5c93d4ec1e75 Mon Sep 17 00:00:00 2001 From: Ndahimana Bonheur Date: Mon, 5 Aug 2024 03:49:19 +0200 Subject: [PATCH] --ammend --- src/App.scss | 3 +- src/assets/styles/trackOrder.scss | 8 +- src/pages/UserViewCart.tsx | 186 ++++++++++++----------- src/pages/UserViewOrders.tsx | 9 +- src/pages/trackOrder.tsx | 159 +++++++++++++++++++ src/router.tsx | 1 + src/store/features/carts/cartService.tsx | 3 +- src/store/features/carts/cartSlice.tsx | 12 +- src/utils/axios/axiosInstance.ts | 3 +- 9 files changed, 275 insertions(+), 109 deletions(-) create mode 100644 src/pages/trackOrder.tsx diff --git a/src/App.scss b/src/App.scss index 36aa8192..eaa7d9b0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -31,10 +31,11 @@ @import './assets/styles/tables.scss'; @import './assets/styles/adminDashboard.scss'; @import './assets/styles/users.scss'; -@import "./assets/styles/liveChat.scss"; +@import './assets/styles/liveChat.scss'; @import './assets//styles/UserProfile.scss'; @import './assets/styles/SellerSideProduct.scss'; @import './assets/styles/myOrders.scss'; @import "./assets/styles/tables.scss"; @import "./assets/styles/cards.scss"; @import "./assets/styles/trackOrder.scss"; +@import './assets/styles/trackOrder.scss'; diff --git a/src/assets/styles/trackOrder.scss b/src/assets/styles/trackOrder.scss index 957ede6a..37fabb1b 100644 --- a/src/assets/styles/trackOrder.scss +++ b/src/assets/styles/trackOrder.scss @@ -35,7 +35,7 @@ $text-family: 'Averia Serif Libre'; p { margin: 30px 0; - + } img { @@ -64,7 +64,7 @@ $text-family: 'Averia Serif Libre'; padding: 0; position: relative; margin-left: 20px; - + &::before { content: ''; @@ -91,7 +91,7 @@ $text-family: 'Averia Serif Libre'; border-radius: 50%; margin-right: 10px; z-index: 1; - + } p { @@ -120,4 +120,4 @@ $text-family: 'Averia Serif Libre'; border-bottom: 2px solid #ccc; padding-bottom: 5px; } -} +} \ No newline at end of file diff --git a/src/pages/UserViewCart.tsx b/src/pages/UserViewCart.tsx index 96873524..c1543525 100644 --- a/src/pages/UserViewCart.tsx +++ b/src/pages/UserViewCart.tsx @@ -1,9 +1,9 @@ /* 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 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, @@ -15,7 +15,7 @@ import { createSessionStripe, updateCartStatus, userSaveOrder, -} from "../store/features/carts/cartSlice"; +} from '../store/features/carts/cartSlice'; import { FaCheckSquare, FaMinus, @@ -24,20 +24,20 @@ import { FaTrash, FaGift, FaShippingFast, -} from "react-icons/fa"; -import { GiBroom } from "react-icons/gi"; -import { useNavigate } from "react-router-dom"; -import Dialog from "@mui/material/Dialog"; -import DialogActions from "@mui/material/DialogActions"; -import DialogContent from "@mui/material/DialogContent"; -import DialogContentText from "@mui/material/DialogContentText"; -import DialogTitle from "@mui/material/DialogTitle"; -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"; +} from 'react-icons/fa'; +import { GiBroom } from 'react-icons/gi'; +import { useNavigate } from 'react-router-dom'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +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(); @@ -56,8 +56,8 @@ const UserViewCart: React.FC = () => { const [open, setOpen] = useState(false); const [cartToPay, setCartToPay] = useState(null); const [amountToPay, setAmountToPay] = useState(null); - const [stripePrice, setStripePrice] = useState(""); - const [currentEndpoint, setCurrentEndpoint] = useState(""); + const [stripePrice, setStripePrice] = useState(''); + const [currentEndpoint, setCurrentEndpoint] = useState(''); const navigate = useNavigate(); const location = useLocation(); @@ -73,20 +73,20 @@ const UserViewCart: React.FC = () => { setIsLoading(true); const response = await dispatch(getUserCarts()); const response1 = await dispatch(getUserCarts()).unwrap(); - if (response.payload === "Not authorized") { + if (response.payload === 'Not authorized') { setIsLoggedOut(true); - toast.error("Please login first"); - navigate("/login"); + toast.error('Please login first'); + navigate('/login'); } setCartResponseData(response1.data); setIsLoading(false); } catch (error: any) { - if (error === "Not authorized") { + if (error === 'Not authorized') { setIsLoggedOut(true); - toast.error("Please login first"); - navigate("/login"); + toast.error('Please login first'); + navigate('/login'); } - console.error("Error fetching carts:", error); + console.error('Error fetching carts:', error); setIsLoading(false); setIsError(true); toast.error(error.message); @@ -108,12 +108,12 @@ const UserViewCart: React.FC = () => { const response = await dispatch(checkout(cartId)); if (!response.payload) { throw new Error( - "Checkout failed, Check your internet connection or try again later" + 'Checkout failed, Check your internet connection or try again later' ); } - localStorage.setItem("cartToPay", cartId); + localStorage.setItem('cartToPay', cartId); - localStorage.setItem("productsToSave", JSON.stringify(productsArr)); + localStorage.setItem('productsToSave', JSON.stringify(productsArr)); const totalCartAmount = response.payload.data.totalAmount; const array = cartResponseData.carts[index]; @@ -126,14 +126,14 @@ const UserViewCart: React.FC = () => { ); setTotalProductPrice(totalProductPrice); - const names = productsArr.map((product) => product.name).join(", "); + const names = productsArr.map((product) => product.name).join(', '); const descriptions = productsArr .map((product) => product.description) - .join(", "); + .join(', '); const image1 = productsArr[0]?.image; const image2 = productsArr[1]?.image; const shopidToSave: any = productsArr[0]?.shopId; - localStorage.setItem("shopIdToSave", shopidToSave); + localStorage.setItem('shopIdToSave', shopidToSave); const unit_amount = Math.round(totalCartAmount * 100); @@ -149,16 +149,16 @@ const UserViewCart: React.FC = () => { ); console.log(stripeProduct); localStorage.setItem( - "stripePrice", + 'stripePrice', stripeProduct.payload.data.product.default_price ); setCheckoutSuccess(true); - toast.success("Checkout is done Successfully"); + toast.success('Checkout is done Successfully'); } catch (error) { - console.error("Checkout failed", error); - toast.error("Checkout failed"); + console.error('Checkout failed', error); + toast.error('Checkout failed'); } finally { setIsPreloader(false); } @@ -169,19 +169,17 @@ const UserViewCart: React.FC = () => { 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", + successUrl: 'http://localhost:5000/shopping-cart?success', + cancelUrl: 'http://localhost:5000/shopping-cart?cancel', customerEmail: profile.payload.email, - price: localStorage.getItem("stripePrice"), + 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"); + console.error('Checkout failed', error); + toast.error('Payment initialization failed, try again later'); } finally { setIsPreloader(false); } @@ -189,38 +187,42 @@ const UserViewCart: React.FC = () => { const checkPayFailOrSuccess = async () => { const params = window.location.search.slice(1); - if (params === "success") { + if (params === 'success') { setIsPreloader(true); - const cartId = localStorage.getItem("cartToPay"); - const products = localStorage.getItem("productsToSave"); - const shopId = localStorage.getItem("shopIdToSave"); + 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"); + navigate('/shopping-cart'); + toast.error('Unknown error occurred saving order'); return; } const data = { cartId: cartId, - status: "Paid", + status: 'Paid', }; + + const response = await dispatch(getUserCarts()); + const response1 = await dispatch(getUserCarts()).unwrap(); + setCartResponseData(response1.data); const cartStatus = await dispatch(updateCartStatus(data)); const order = await dispatch( userSaveOrder({ cartId: cartId, - paymentMethodId: "Stripe", + paymentMethodId: 'Stripe', products: products, shopId: shopId, }) ); - toast.success("Cart Payment successful"); - localStorage.removeItem("cartToPay"); - localStorage.removeItem("productsToSave"); - localStorage.removeItem("shopIdToSave"); - navigate("/shopping-cart"); + toast.success('Cart Payment successful'); + localStorage.removeItem('cartToPay'); + localStorage.removeItem('productsToSave'); + localStorage.removeItem('shopIdToSave'); + navigate('/my-orders'); setIsPreloader(false); - } else if (params === "cancel") { - toast.error("Payment cancelled successfully"); - navigate("/shopping-cart"); + } else if (params === 'cancel') { + toast.error('Payment cancelled successfully'); + navigate('/shopping-cart'); setIsPreloader(false); } }; @@ -306,8 +308,8 @@ const UserViewCart: React.FC = () => { await dispatch(clearCarts()).unwrap(); setIsPreloader(false); await fetchCarts(); - toast.success("Cart cleared successfully"); - navigate("/shopping-cart"); + toast.success('Cart cleared successfully'); + navigate('/shopping-cart'); handleClose(); }; @@ -323,10 +325,10 @@ const UserViewCart: React.FC = () => { ); setCartResponseData({ ...cartResponseData, carts: remainingCarts }); setIsPreloader(false); - toast.success("Cart cleared successfully"); + toast.success('Cart cleared successfully'); } catch (error) { - console.error("Error clearing cart:", error); - toast.error("Failed to clear the cart"); + console.error('Error clearing cart:', error); + toast.error('Failed to clear the cart'); } finally { setIsPreloader(false); } @@ -346,9 +348,9 @@ const UserViewCart: React.FC = () => { const response = await dispatch(clearCartProduct({ cartId, productId })); const response1 = await dispatch(getUserCarts()).unwrap(); setCartResponseData(response1.data); - toast.success("product cleared successfully"); + toast.success('product cleared successfully'); } catch (error) { - toast.error("Failed to clear the product "); + toast.error('Failed to clear the product '); throw error; } finally { setIsPreloader(false); @@ -365,12 +367,12 @@ const UserViewCart: React.FC = () => { {isPreloader && (
- + @@ -396,7 +398,7 @@ const UserViewCart: React.FC = () => {

Shopping Cart

- {cart.status === "Paid" ? ( + {cart.status === 'Paid' ? ( @@ -407,7 +409,7 @@ const UserViewCart: React.FC = () => { } className={`checkout-btn`} > - {"Checkout"} + {'Checkout'} )} @@ -439,9 +441,11 @@ const UserViewCart: React.FC = () => { {product.discount}
${product.price}
-
{product.description}
+
+ {product.description} +
- {cart.status !== "Paid" && ( + {cart.status !== 'Paid' && (