Payment.jsx

import { useState, useEffect } from "react";
import {useSelector, useDispatch} from 'react-redux'
import { v4 as uuidv4 } from 'uuid';
import moment from "moment";
function Payment() {
    const [current, setCurrent] = useState({})
    const [done, setDone] = useState(false)
    const [total, setTotal] = useState(0)
    const cartList = JSON.parse(localStorage.getItem('CART'))
    useEffect(() => {
      calTotal()
    }, [cartList])
  
    const calTotal = () => {
      let calculatedTotal = 0;
      cartList.forEach(cart => {
        calculatedTotal += (cart.product.price) * cart.quantity;
      });
      setTotal(calculatedTotal);
    }
    const totalDiscount = cartList.reduce((total, cartItem) => {
      return total + cartItem.product.discount
    }, 0)
    console.log(cartList)
    const dispatch = useDispatch()
    const handleOnChange = (e) => {
        let id = uuidv4()
        let date = moment().format('YYYY/MM/DD HH:mm');
        const status = 1
        setCurrent({...current, [e.target.name]: e.target.value, id: id, created: date, status: status})
    }
    const handleConfirm = (e) => {
      e.preventDefault();
      const newOrder = cartList.map(cart => {
        return {...current, productName: cart.product.productName}
      })
      dispatch({type: "ORDER_POST", payload: newOrder})
      console.log("new order",newOrder)
      cartList.forEach(product => {
        let payload = {
          id: uuidv4(),
          orderId: current.id,
          productId: product.product.id,
          price: 1,
          quantity: 1,
        }
        dispatch({type: "ORDER_DETAILS_POST", payload})
      })
      setDone(true)
    }
    return (
        <div className="card">
            <div className="card-body">
                {done ?
                    (
                        <>
  <div className="text-left logo p-2 px-5">
    <img src="https://i.imgur.com/2zDU056.png" width={50} alt="san pham"/>
  </div>
  <div className="invoice p-5">
    <h5>Đơn hàng của bạn đã được xác nhận</h5>
    <span className="font-weight-bold d-block mt-4">Hello, {current.customerName}</span>
    <span>
      Đơn hàng của bạn đã được xác nhận và sẽ được chuyển phát trong 2 ngày tới!
    </span>
    <div className="payment border-top mt-3 mb-3 border-bottom table-responsive">
      <table className="table table-borderless">
        <tbody>
          <tr>
            <td>
              <div className="py-2">
                <span className="d-block text-muted">Ngày đặt hàng</span>
                <span>{moment().format('YYYY/MM/DD')}</span>
              </div>
            </td>
            <td>
              <div className="py-2">
                <span className="d-block text-muted">Order No</span>
                <span>{current.id}</span>
              </div>
            </td>
            <td>
              <div className="py-2">
                <span className="d-block text-muted">Payment</span>
                <span>
                  <img
                    src="https://img.icons8.com/color/48/000000/mastercard.png"
                    width={20}
                    alt="hinh anh cart"
                  />
                </span>
              </div>
            </td>
            <td>
              <div className="py-2">
                <span className="d-block text-muted">Địa chỉ</span>
                <span>{current.address}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div className="product border-bottom table-responsive">
      <table className="table table-borderless">
        <tbody>
          {cartList.map(cart => (
            <tr>
            <td width="20%">
              <img src={cart.product.productImg} width={90} alt="hinh anh san pham" />
            </td>
            <td width="60%">
              <span className="font-weight-bold">{cart.product.productName}</span>
              <div className="product-qty">
                <span className="d-block">Số lượng: {cart.quantity}</span>
              </div>
            </td>
            <td width="20%">
              <div className="text-right">
                <span className="font-weight-bold">{cart.product.price} VND</span>
              </div>
            </td>
          </tr>
          ))}

        </tbody>
      </table>
    </div>
    <div className="row d-flex justify-content-end">
      <div className="col-md-5">
        <table className="table table-borderless">
          <tbody className="totals">
            <tr>
              <td>
                <div className="text-left">
                  <span className="text-muted">Tổng tiền</span>
                </div>
              </td>
              <td>
                <div className="text-right">
                  <span>VND{total}</span>
                </div>
              </td>
            </tr>
           
            <tr>
              <td>
                <div className="text-left">
                  <span className="text-muted">Giảm giá</span>
                </div>
              </td>
              <td>
                <div className="text-right">
                  <span className="text-success">VND {totalDiscount}</span>
                </div>
              </td>
            </tr>
            <tr className="border-top border-bottom">
              <td>
                <div className="text-left">
                  <span className="font-weight-bold">Tổng tiền</span>
                </div>
              </td>
              <td>
                <div className="text-right">
                  <span className="font-weight-bold">VND {total}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <p className="font-weight-bold mb-0">Cảm ơn bạn đã mua hàng!</p>
    <span>Nike Team</span>
  </div>
  <div className="d-flex justify-content-between footer p-3">
    <span>
      Need Help? visit our <a href="#"> help center</a>
    </span>
    <span>12 June, 2020</span>
  </div>
</>

                    ) :
                    (
                        <>
                        <h4 className="card-title">Nhập thông tin khách hàng</h4>
                        <form className="forms-sample">
                    <div className="form-group">
                        <input
                        type="text"
                        className="form-control"
                        name='id'
                        onChange={handleOnChange}
                        value={current?.id || ''}
                        hidden
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="exampleInputName1">Tên khách hàng</label>
                        <input
                        type="text"
                        className="form-control"
                        name='customerName'
                        onChange={handleOnChange}
                        value={current?.customerName || ''}
                        required
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="exampleInputName1">Email</label>
                        <input
                        type="email"
                        className="form-control"
                        name='email'
                        onChange={handleOnChange}
                        value={current?.email || ''}
                        required
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="exampleInputEmail3">Số điện thoại</label>
                        <input
                        type="text"
                        className="form-control"
                        name='phone'
                        value={current?.phone || ''}
                        onChange={handleOnChange}
                        required
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="exampleInputEmail3">Địa chỉ</label>
                        <input
                        type="text"
                        className="form-control"
                        name='address'
                        value={current?.address || ''}
                        onChange={handleOnChange}
                        required
                        />
                    </div>
                    <div className="form-group">
                        <input
                        type="date"
                        className="form-control"
                        name='created'
                        value={current?.created || ''}
                        onChange={handleOnChange}
                        hidden
                        />
                    </div>
                    <div className="form-group">
                        <input
                        type="text"
                        className="form-control"
                        name='status'
                        value={current?.status || ''}
                        onChange={handleOnChange}
                        hidden
                        />
                    </div>

                    <button className="btn btn-primary mr-2" onClick={handleConfirm}>Xác nhận mua hàng</button>
                        </form>
                        </>
                    )
                }

            </div>
        </div>
     );
}

export default Payment