Merge branch 'moshiur'

JaberHPranto · Jul 9, 2021 · 49d084b · 49d084b
2 parents 3ab77a5 + 622d4f9
commit 49d084b
Show file tree

Hide file tree

Showing 19 changed files with 857 additions and 278 deletions.
diff --git a/client/src/components/Ecommerce/CheckoutSteps.js 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 (
+    <Nav className="justify-content-center mb-4">
+      <Nav.Item>
+        {step1 ? (
+          <LinkContainer to="/login">
+            <Nav.Link>Sign In</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Sign In</Nav.Link>
+        )}
+      </Nav.Item>
+
+      <Nav.Item>
+        {step2 ? (
+          <LinkContainer to="/shipping">
+            <Nav.Link>Shipping</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Shipping</Nav.Link>
+        )}
+      </Nav.Item>
+
+      <Nav.Item>
+        {step3 ? (
+          <LinkContainer to="/payment">
+            <Nav.Link>Payment</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Payment</Nav.Link>
+        )}
+      </Nav.Item>
+
+      <Nav.Item>
+        {step4 ? (
+          <LinkContainer to="/placeorder">
+            <Nav.Link>Place Order</Nav.Link>
+          </LinkContainer>
+        ) : (
+          <Nav.Link disabled>Place Order</Nav.Link>
+        )}
+      </Nav.Item>
+    </Nav>
+  );
+};
+
+export default CheckoutSteps;
diff --git a/client/src/components/Ecommerce/Screen/PaymentScreen.js 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 (
+    <FormContainer>
+      <CheckoutSteps step1 step2 step3 />
+      <h1>Payment Method</h1>
+      <Form onSubmit={submitHandler}>
+        <Form.Group>
+          <Form.Label as="legend">Select Method </Form.Label>
+          <Col>
+            <Form.Check
+              type="radio"
+              label="PayPal or Credit Card"
+              id="PayPal"
+              name="paymentMethod"
+              value="PayPal"
+              checked={paymentMethod === "PayPal" ? true : false}
+              onChange={(e) => setPaymentMethod(e.target.value)}
+            ></Form.Check>
+            <Form.Check
+              type="radio"
+              label="Stripe"
+              id="Stripe"
+              name="paymentMethod"
+              value="Stripe"
+              checked={paymentMethod === "PayPal"}
+              onChange={(e) => setPaymentMethod(e.target.value)}
+            ></Form.Check>
+
+            <Form.Check
+              type="radio"
+              label="SSL E-Commerce"
+              id="SSL E-Commerce"
+              name="paymentMethod"
+              value="SSL E-Commerce"
+              checked={paymentMethod === "SSL E-Commerce" ? true : false}
+              onChange={(e) => setPaymentMethod(e.target.value)}
+            ></Form.Check>
+          </Col>
+        </Form.Group>
+
+        <Button type="submit" variant="primary">
+          Continue
+        </Button>
+      </Form>
+    </FormContainer>
+  );
+};
+
+export default PaymentScreen;
diff --git a/client/src/components/Ecommerce/Screen/PlaceOrderScreen.js 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 (
+    <>
+      <CheckoutSteps step1 step2 step3 step4 />
+      <Row>
+        <Col md={8}>
+          <ListGroup variant="flush">
+            <ListGroup.Item>
+              <h2>Delivery Location</h2>
+              <p>
+                <strong>Address:</strong>
+                {cart.shippingAddress.address}, {cart.shippingAddress.city}{" "}
+                {cart.shippingAddress.thana}, {cart.shippingAddress.houseNumber}
+              </p>
+            </ListGroup.Item>
+
+            <ListGroup.Item>
+              <h2>Payment Method</h2>
+              <strong>Method: </strong>
+              {cart.paymentMethod}
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <h2>Order Items</h2>
+              {cart.cartItems.length === 0 ? (
+                <Message>Your cart is empty</Message>
+              ) : (
+                <ListGroup variant="flush">
+                  {cart.cartItems.map((item, index) => (
+                    <ListGroup.Item key={index}>
+                      <Row>
+                        <Col md={1}>
+                          <Image
+                            src={item.image}
+                            alt={item.name}
+                            fluid
+                            rounded
+                          />
+                        </Col>
+                        <Col>
+                          <Link to={`/product/${item.product}`}>
+                            {item.name}
+                          </Link>
+                        </Col>
+                        <Col md={4}>
+                          {item.qty} x ৳{item.price} = ৳{item.qty * item.price}
+                        </Col>
+                      </Row>
+                    </ListGroup.Item>
+                  ))}
+                </ListGroup>
+              )}
+            </ListGroup.Item>
+          </ListGroup>
+        </Col>
+        <Col md={4}>
+          <Card>
+            <ListGroup variant="flush">
+              <ListGroup.Item>
+                <h2>Order Summary</h2>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Row>
+                  <Col>Items</Col>
+                  <Col>৳{cart.itemsPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Row>
+                  <Col>Delivery Charge</Col>
+                  <Col>৳{cart.shippingPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              {/* <ListGroup.Item>
+                <Row>
+                  <Col>Tax</Col>
+                  <Col>${cart.taxPrice}</Col>
+                </Row>
+              </ListGroup.Item> */}
+              <ListGroup.Item>
+                <Row>
+                  <Col>Total</Col>
+                  <Col>৳{cart.totalPrice}</Col>
+                </Row>
+              </ListGroup.Item>
+              <ListGroup.Item>
+                {error && <Message variant="danger">{error}</Message>}
+              </ListGroup.Item>
+              <ListGroup.Item>
+                <Button
+                  type="button"
+                  className="btn-block"
+                  disabled={cart.cartItems === 0}
+                  onClick={placeOrderHandler}
+                >
+                  Place Order
+                </Button>
+              </ListGroup.Item>
+            </ListGroup>
+          </Card>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default PlaceOrderScreen;
diff --git a/client/src/components/Ecommerce/Screen/ShippingScreen.js 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 (
+    <FormContainer>
+      <CheckoutSteps step1 step2 />
+      <h1>Shipping</h1>
+      <Form onSubmit={submitHandler}>
+        <Form.Group controlId="address">
+          <Form.Label>Address</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter address"
+            value={address}
+            required
+            onChange={(e) => setAddress(e.target.value)}
+          ></Form.Control>
+        </Form.Group>
+
+        <Form.Group controlId="city">
+          <Form.Label>City</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter city"
+            value={city}
+            required
+            onChange={(e) => setCity(e.target.value)}
+          ></Form.Control>
+        </Form.Group>
+
+        <Form.Group controlId="thana">
+          <Form.Label>Thana</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter Thana"
+            value={thana}
+            required
+            onChange={(e) => setThana(e.target.value)}
+          ></Form.Control>
+        </Form.Group>
+
+        <Form.Group controlId="houseNumber">
+          <Form.Label>House Number</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter House Number"
+            value={houseNumber}
+            required
+            onChange={(e) => setHouseNumber(e.target.value)}
+          ></Form.Control>
+        </Form.Group>
+
+        <Button type="submit" variant="primary">
+          Continue
+        </Button>
+      </Form>
+    </FormContainer>
+  );
+};
+
+export default ShippingScreen;
diff --git 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
@@ -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";