Merge pull request #9 from zahraahmadiii/payment

Payment

src/Api/Servises/postOrders/index.js

@@ -0,0 +1,2 @@
+import { instance } from "../../Constants/index";
+export const  postOrders = (newOrder) => instance.post('/orders ', newOrder)

src/Api/Servises/updateDelivery/index.js

@@ -0,0 +1,2 @@
+import {instance} from "../../Constants/index";
+export const  updateDelivery = (delivered) => instance.patch(`/orders/${delivered.id}`,delivered)

src/App.js

@@ -5,23 +5,23 @@ import 'react-toastify/dist/ReactToastify.css';
 import { useDispatch, useSelector } from 'react-redux';
 import {addToCart} from "../src/redux/Features/orders-slice"
 function App() {
-//   const dispatch=useDispatch()
-//   const orders = useSelector(store => store.ordersSlice);
-//  useEffect(()=>{
-//      let localBasket = localStorage.getItem('basket') && JSON.parse(localStorage.getItem('basket'))
+  const dispatch=useDispatch()
+  const orders = useSelector(store => store.ordersSlice);
+ useEffect(()=>{
+     let localBasket = localStorage.getItem('basket') && JSON.parse(localStorage.getItem('basket'))
 
-//      if(localBasket){
-//       dispatch(addToCart(localBasket))
-//      }
+     if(localBasket){
+      dispatch(addToCart(localBasket))
+     }
 
-//  },[])
+ },[])
 
-//  useEffect(()=>{
-//   const basketData= JSON.stringify(orders.orderProduct)
-//   if(orders.orderProduct.length){
-//     localStorage.setItem("basket",basketData)  
-//   }
-//   },[orders.orderProduct])
+ useEffect(()=>{
+  const basketData= JSON.stringify(orders.orderProduct)
+  if(orders.orderProduct.length){
+    localStorage.setItem("basket",basketData)  
+  }
+  },[orders.orderProduct])
 
 
   return (

src/Components/Card/index.js

@@ -5,7 +5,7 @@ import { BASE_URL } from '../../Api/Constants';
 import { useSearchParams ,useNavigate} from 'react-router-dom';
 import { showProductDetail } from '../../redux/Features/products-slice';
  const Card = ({item}) => {
-// console.log(item)
+
   const {products} = useSelector(store => store);
   const [searchParams] = useSearchParams();
   const dispatch=useDispatch()

src/Components/CartTable/index.js

@@ -4,10 +4,8 @@ import Table from 'react-bootstrap/Table';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BASE_URL } from '../../Api/Constants';
 import{BsTrash} from "react-icons/bs"
-import ReactPaginate from 'react-paginate';
 import {useDispatch, useSelector} from 'react-redux'
-import { useState } from 'react';
-import { addToCart, deleteOrder } from '../../redux/Features/orders-slice';
+import { addToCart } from '../../redux/Features/orders-slice';
 
 
 const CartTable = ({allOrders}) => {
@@ -17,9 +15,9 @@ const CartTable = ({allOrders}) => {
   const handleDeleteOrder=(product)=>{
    let filteredProduct= orders.orderProduct.filter((item) =>  item.id !== product.id)
    dispatch(addToCart(filteredProduct))
+   localStorage.setItem('basket', JSON.stringify(filteredProduct));
   }
-    // let localBasket = JSON.parse(localStorage.getItem('basket'))
-    // console.log(localBasket) 
+
   return (
 
     <div className={styles.table}>

src/Components/Category/index.js

@@ -4,7 +4,7 @@ import Card from '../Card'
 import styles from "./style.module.css"
 
 const getProduct=async(category,page,limit)=>{
-    // console.log(category)
+
     const res= await getProductsCategory(category,page,limit)
     return res.data
 }
@@ -17,7 +17,6 @@ useEffect(()=>{
     getProduct(category,page,limit).then(res => setProducts(res))
    },[])
 
-//    console.log(products)
 
   return (
      <div className={styles.wraper_products}>

src/Components/OrderTable/index.js

@@ -9,7 +9,6 @@ import { openOrdersModal } from '../../redux/Features/orders-slice';
 
 
  const OrderTable= ({item}) => {
-  // console.log(item)
 
   ///pagination////////////////////////////////////////////////////////////
   const orders = useSelector(store => store.ordersSlice);
@@ -31,7 +30,6 @@ import { openOrdersModal } from '../../redux/Features/orders-slice';
     // open order modal///////////////////////////////////////////
     const dispatch=useDispatch()
     const handleOpenOrderModal=(id)=>{
-      // console.log(id)
      dispatch(openOrdersModal(id)) 
     }
   return (

src/Components/datePicker/index.js

@@ -4,12 +4,17 @@ import persian from "react-date-object/calendars/persian"
 import persian_fa from "react-date-object/locales/persian_fa"
 
 export default function PickDate() {
-  const [value, setValue] = useState(new Date())
+  const [value, setValue] = useState(null)
+ if(value){
+  const expectDate=`${value.day} / ${value.month.number} / ${value.year}`
+  localStorage.setItem("expectDate",expectDate)
+ }
 
     return (
         <div  style={{direction:"rtl"}}     
         >
           <DatePicker
+            onChange={setValue}
            style={{
             width: "100%",
             borderRadius: "5px",

src/Components/order-modal/index.js

@@ -5,12 +5,12 @@ import Table from 'react-bootstrap/Table';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Button from '../button';
 import { useDispatch, useSelector} from 'react-redux'
-import { closeOrdersModal } from '../../redux/Features/orders-slice';
+import { closeOrdersModal, deliverOrder } from '../../redux/Features/orders-slice';
 import { fetchCustomerData } from '../../Api/Servises/getCustomersOrder';
+import { updateDelivery } from '../../Api/Servises/updateDelivery';
+import { ToastContainer ,toast} from 'react-toastify';
 const OrderModal = () => {
-
   const orders = useSelector(store => store.ordersSlice);
-  // console.log(orders)
 
   const dispatch=useDispatch()
   useEffect(()=>{
@@ -21,9 +21,24 @@ const OrderModal = () => {
   const handleCloseMOdal=()=>{
     dispatch(closeOrdersModal()) 
   }
+  const handleDeliverOrder= (id)=>{
+    try{
+      const newDeliver={
+        id:id,
+        delivered:true,
+       }
+        updateDelivery(newDeliver)
+        dispatch(closeOrdersModal()) 
+        toast.success('سفارش با موفقیت ارسال شد')
+    }catch(error){
+      toast.error("سفارش ارسال نشد");
+    }
+
+  }
   return (
    <>
    <div className={styles.wrapper_orderModal}>
+   <ToastContainer/>
     <div className={styles.modal} >
       <div className={styles.top}>
         <p className={styles.para}>سفارشات مشتری</p>
@@ -57,7 +72,7 @@ const OrderModal = () => {
 
            </div>
 
-      <div className={styles.bottom}>
+         <div className={styles.bottom}>
        <Table size="sm" bordered className={styles.bordertable}>
         <thead>
          <tr className={styles.tr}>
@@ -81,18 +96,17 @@ const OrderModal = () => {
 
       </tbody>
      </Table>
-   </div>
-    </>
+        </div>
+      <div  className={styles.bottom}>
+         {orders.delivery ?
+           <p>زمان تحویل :{item.expectAt} </p> :
+          <Button btnColor={" rgb(7 68 199)"} onClick={()=>handleDeliverOrder(item.id)}  >{"تحویل شد"}</Button>}
+
+       </div>
+     </>
           )
         }
        })}
-
-       <div  className={styles.bottom}>
-        {orders.delivery ?
-        <p>زمان تحویل :</p> :
-         <Button btnColor={" rgb(7 68 199)"}>{"تحویل شد"}</Button>}
-
-       </div>
     </div>
    </div>
    </>

src/Components/product-modal/index.js

@@ -112,7 +112,7 @@ import { updateProducts } from '../../Api/Servises/updateProduct';
           category:data.category,
           description:data.description
         } 
-        // console.log(editedProduct)
+
          updateProducts(editedProduct) 
           dispatch(getProduct())
           dispatch(closeEditModal())

src/Components/slider/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
-import pic2 from "../../../src/Assets/images/header3.jpg"
+// import pic2 from "../../../src/Assets/images/header3.jpg"
 import pic3 from "../../../src/Assets/images/header4.jpg"
 import pic4 from "../../../src/Assets/images/header5.jpg"
 import "swiper/css";
@@ -27,9 +27,9 @@ export default function Slider() {
         modules={[Autoplay, Pagination, Navigation]}
         className={styles.loginslider}
       >
-        <SwiperSlide><img src={pic2} className={styles.loginslider}/></SwiperSlide>
+        {/* <SwiperSlide><img src={pic2} className={styles.loginslider}/></SwiperSlide> */}
         <SwiperSlide><img src={pic3} className={styles.loginslider}/></SwiperSlide>
-        <SwiperSlide><img src={pic4} className={styles.loginslider}/></SwiperSlide>
+        {/* <SwiperSlide><img src={pic4} className={styles.loginslider}/></SwiperSlide> */}
       </Swiper>
     </div>
 

src/Components/slider/style.module.css

@@ -2,7 +2,7 @@
     display: block;
     width: 30rem;
     height: 60vh;
-    border: 3px solid #ffef5c;
+    border: 1px solid #ffef5c;
   }
   :root{
     --swiper-theme-color: transparent;

src/Pages/Cart/index.js

@@ -14,6 +14,7 @@ import { useSelector } from 'react-redux';
     let  setTotalCount=0
     orders.orderProduct.map((item)=> setTotalCount+=item.count*item.price)
     setToatalPrice(setTotalCount)
+    localStorage.setItem("totalPrice",setTotalCount)
   },[orders.orderProduct])
 
   return (

src/Pages/Checkout/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from "./style.module.css"
 import { Link, useNavigate } from 'react-router-dom';
 import Button from '../../Components/button';
@@ -14,9 +14,11 @@ const CheckOut = () => {
     lastname:yup.string().required("نام خانوادگی را وارد کنید"),
     address:yup.string().required("آدرس الزامی است"),
     phone: yup.string().required("شماره تلفن الزامی است"),
-    // expectAt:yup.string().required("زمان تحویل الزامی است"),
+  //  expectAt:yup.string().required("زمان تحویل الزامی است"), 
   })
 
+  const[date,setDate]=useState(null)
+
   const {
     register,
     handleSubmit,
@@ -25,9 +27,9 @@ const CheckOut = () => {
    const navigate=useNavigate()
 
    const submitData =(data)=>{
-    console.log(data)
+    // console.log(data)
     const customerData = JSON.parse(localStorage.getItem('customerData') || '[]');
-    localStorage.setItem('customerData', JSON.stringify([data])); 
+    localStorage.setItem('customerData', JSON.stringify(data)); 
       navigate("/Cart/CheckOut/Payment")  
 
   }

src/Pages/Home/index.js

@@ -15,7 +15,7 @@ import { Category } from '../../Components/Category';
 
  const Home = () => {
   const {products} = useSelector(store => store);
-  // console.log(products);
+
   const dispatch=useDispatch()
 
   useEffect(()=>{

src/Pages/LoginPanel/index.js

@@ -7,7 +7,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from "yup";
 import { loginService } from '../../Api/Servises/auth';
 import Cookies from "js-cookie";
-import { instance } from '../../Api/Constants';
 import { ToastContainer ,toast} from 'react-toastify';
 import Slider from '../../Components/slider';
 const LoginPanel = () => {
@@ -42,7 +41,6 @@ const LoginPanel = () => {
 
  } catch(error) {
     toast.error("نام کاربری و رمزعبور صحیح نیست");
-    // console.log(error)
 }
 
 }

src/Pages/LoginPanel/style.module.css

@@ -1,11 +1,12 @@
 
 .loginpage{
-    background-image: linear-gradient(to bottom right,rgb(163, 192, 255) , #ffef5c);
+    /* background-image: linear-gradient(to bottom right,rgb(163, 192, 255) , #fffb92); */
     width: 100vw;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
+    /* background-color: rgb(251, 251, 251); */
 }
 .wraper{
     display: flex;
@@ -19,7 +20,7 @@
     background-color: rgb(239, 239, 239);
     display: flex;
     flex-direction: column;
-    border: 3px solid #ffef5c;
+    border: 1px solid #ffef5c;
     direction: rtl;
     gap: 1rem;
     font-size: large;
@@ -28,7 +29,7 @@
     color: gray;
 }
 .input{
-    width: 98%;
+    width: 95%;
     height: 1.90rem;
     border: none;
     border-radius: 5px;
@@ -38,8 +39,6 @@
    display: flex;
    justify-content: center;
    gap: 1rem;
-   margin-top: 1.70rem;
-
 }
 .logo{
     width: 6rem;