diff --git a/client/src/components/Ecommerce/CheckoutSteps.js b/client/src/components/Ecommerce/CheckoutSteps.js new file mode 100644 index 0000000..2739e5c --- /dev/null +++ b/client/src/components/Ecommerce/CheckoutSteps.js @@ -0,0 +1,51 @@ +import React from "react"; +import { Nav } from "react-bootstrap"; +import { LinkContainer } from "react-router-bootstrap"; + +const CheckoutSteps = ({ step1, step2, step3, step4 }) => { + return ( + + ); +}; + +export default CheckoutSteps; diff --git a/client/src/components/Ecommerce/Screen/PaymentScreen.js b/client/src/components/Ecommerce/Screen/PaymentScreen.js new file mode 100644 index 0000000..eb7c343 --- /dev/null +++ b/client/src/components/Ecommerce/Screen/PaymentScreen.js @@ -0,0 +1,73 @@ +import React, { useState } from "react"; +import { Form, Button, Col } from "react-bootstrap"; +import { useDispatch, useSelector } from "react-redux"; +import FormContainer from "../FormContainer"; +import CheckoutSteps from "../CheckoutSteps"; +import { savePaymentMethod } from "../../../redux/actions/cartActions"; + +const PaymentScreen = ({ history }) => { + const cart = useSelector((state) => state.cart); + const { shippingAddress } = cart; + + if (!shippingAddress.address) { + history.push("/shipping"); + } + + const [paymentMethod, setPaymentMethod] = useState("PayPal"); + + const dispatch = useDispatch(); + + const submitHandler = (e) => { + e.preventDefault(); + dispatch(savePaymentMethod(paymentMethod)); + history.push("/placeorder"); + }; + + return ( + + +

Payment Method

+
+ + Select Method + + setPaymentMethod(e.target.value)} + > + setPaymentMethod(e.target.value)} + > + + setPaymentMethod(e.target.value)} + > + + + + +
+ + ); +}; + +export default PaymentScreen; diff --git a/client/src/components/Ecommerce/Screen/PlaceOrderScreen.js b/client/src/components/Ecommerce/Screen/PlaceOrderScreen.js new file mode 100644 index 0000000..7204c41 --- /dev/null +++ b/client/src/components/Ecommerce/Screen/PlaceOrderScreen.js @@ -0,0 +1,158 @@ +import React from "react"; +import { Button, Card, Col, Image, ListGroup, Row } from "react-bootstrap"; +import { useDispatch, useSelector } from "react-redux"; +import { Link } from "react-router-dom"; +import { createOrder } from "../../../redux/actions/orderActions"; +import CheckoutSteps from "../CheckoutSteps"; +import Message from "../Message"; +import { toastSuccessMessage } from "../ToastMessage"; + +const PlaceOrderScreen = ({ history }) => { + const dispatch = useDispatch(); + + const cart = useSelector((state) => state.cart); + + const orderCreate = useSelector((state) => state.orderCreate); + const { order, success, error } = orderCreate; + + // useEffect(() => { + // if (success) { + // // history.push(`/order/${order._id}`); + // // history.push("/order") + // } + // // eslint-disable-next-line + // }, [history, success]); + + const placeOrderHandler = () => { + console.log(cart.cartItems); + + dispatch( + createOrder({ + orderItems: cart.cartItems, + shippingAddress: cart.shippingAddress, + paymentMethod: cart.paymentMethod, + itemsPrice: cart.itemsPrice, + shippingPrice: cart.shippingPrice, + totalPrice: cart.totalPrice, + }) + ); + toastSuccessMessage("You're order has been placed") + + }; + //Calculate Price + const addDecimals = (num) => { + return (Math.round(num * 100) / 100).toFixed(2); + }; + + cart.itemsPrice = addDecimals( + cart.cartItems.reduce((acc, item) => acc + item.price * item.qty, 0) + ); + cart.shippingPrice = 30; + + cart.totalPrice = Number(cart.itemsPrice) + Number(cart.shippingPrice); + + return ( + <> + + + + + +

Delivery Location

+

+ Address: + {cart.shippingAddress.address}, {cart.shippingAddress.city}{" "} + {cart.shippingAddress.thana}, {cart.shippingAddress.houseNumber} +

+ + + +

Payment Method

+ Method: + {cart.paymentMethod} + + +

Order Items

+ {cart.cartItems.length === 0 ? ( + Your cart is empty + ) : ( + + {cart.cartItems.map((item, index) => ( + + + + {item.name} + + + + {item.name} + + + + {item.qty} x ৳{item.price} = ৳{item.qty * item.price} + + + + ))} + + )} + + + + + + + +

Order Summary

+ + + + Items + ৳{cart.itemsPrice} + + + + + Delivery Charge + ৳{cart.shippingPrice} + + + {/* + + Tax + ${cart.taxPrice} + + */} + + + Total + ৳{cart.totalPrice} + + + + {error && {error}} + + + + + + + + + + ); +}; + +export default PlaceOrderScreen; diff --git a/client/src/components/Ecommerce/Screen/ShippingScreen.js b/client/src/components/Ecommerce/Screen/ShippingScreen.js new file mode 100644 index 0000000..7a1ee17 --- /dev/null +++ b/client/src/components/Ecommerce/Screen/ShippingScreen.js @@ -0,0 +1,84 @@ +import React, { useState } from "react"; +import { Button, Form } from "react-bootstrap"; +import { useDispatch, useSelector } from "react-redux"; +import FormContainer from "../FormContainer"; +import CheckoutSteps from "../CheckoutSteps"; +import { saveShippingAddress } from "../../../redux/actions/cartActions"; + +const ShippingScreen = ({ history }) => { + const cart = useSelector((state) => state.cart); + const { shippingAddress } = cart; + + const [address, setAddress] = useState(shippingAddress.address || ""); + const [city, setCity] = useState(shippingAddress.city || ""); + const [thana, setThana] = useState(shippingAddress.thana || ""); + const [houseNumber, setHouseNumber] = useState( + shippingAddress.houseNumber || "" + ); + const dispatch = useDispatch(); + + const submitHandler = (e) => { + e.preventDefault(); + console.log("submit"); + dispatch(saveShippingAddress({ address, city, thana, houseNumber })); + history.push("/payment"); + }; + + return ( + + +

Shipping

+
+ + Address + setAddress(e.target.value)} + > + + + + City + setCity(e.target.value)} + > + + + + Thana + setThana(e.target.value)} + > + + + + House Number + setHouseNumber(e.target.value)} + > + + + +
+ + ); +}; + +export default ShippingScreen; diff --git a/client/src/constants/cartConstants.js b/client/src/constants/cartConstants.js index 04f3db8..418150f 100644 --- a/client/src/constants/cartConstants.js +++ b/client/src/constants/cartConstants.js @@ -1,3 +1,5 @@ -export const CART_ADD_ITEM = 'CART_ADD_ITEM' -export const CART_REMOVE_ITEM = 'CART_REMOVE_ITEM' +export const CART_ADD_ITEM = "CART_ADD_ITEM"; +export const CART_REMOVE_ITEM = "CART_REMOVE_ITEM"; +export const CART_SAVE_SHIPPING_ADDRESS = "CART_SAVE_SHIPPING_ADDRESS"; +export const CART_SAVE_PAYMENT_METHOD = "CART_SAVE_PAYMENT_METHOD"; export const CART_RESET = 'CART_RESET' diff --git a/client/src/constants/orderConstants.js b/client/src/constants/orderConstants.js new file mode 100644 index 0000000..eb4c81f --- /dev/null +++ b/client/src/constants/orderConstants.js @@ -0,0 +1,3 @@ +export const ORDER_CREATE_REQUEST = "ORDER_CREATE_REQUEST"; +export const ORDER_CREATE_SUCCESS = "ORDER_CREATE_SUCCESS"; +export const ORDER_CREATE_FAIL = "ORDER_CREATE_FAIL"; diff --git a/client/src/pages/EcommercePage.js b/client/src/pages/EcommercePage.js index ac8d218..5f2fabd 100644 --- a/client/src/pages/EcommercePage.js +++ b/client/src/pages/EcommercePage.js @@ -1,6 +1,6 @@ -import React from 'react'; -import { Container } from 'react-bootstrap'; -import { BrowserRouter as Router, Route } from 'react-router-dom'; +import React from "react"; +import { Container } from "react-bootstrap"; +import { BrowserRouter as Router, Route } from "react-router-dom"; import Footer from "../components/Ecommerce/Footer"; import Header from "../components/Ecommerce/Header"; import CartScreen from '../components/Ecommerce/Screen/CartScreen'; @@ -8,33 +8,38 @@ import ForgetPasswordScreen from '../components/Ecommerce/Screen/ForgetPasswordS import HomeScreen from '../components/Ecommerce/Screen/HomeScreen'; import LoginScreen from '../components/Ecommerce/Screen/LoginScreen'; import PasswordResetScreen from '../components/Ecommerce/Screen/PasswordResetScreen'; +import PaymentScreen from "../components/Ecommerce/Screen/PaymentScreen"; +import PlaceOrderScreen from "../components/Ecommerce/Screen/PlaceOrderScreen"; import ProductScreen from '../components/Ecommerce/Screen/ProductScreen'; import ProfileScreen from '../components/Ecommerce/Screen/ProfileScreen'; import RegisterScreen from '../components/Ecommerce/Screen/RegisterScreen'; +import ShippingScreen from "../components/Ecommerce/Screen/ShippingScreen"; import '../styles/ecommerce.css'; function EcommercePage() { - return ( - -
-
- - - - - - - - - - - - - -
-