Last active
September 3, 2023 07:24
-
-
Save hucancode/1552e91352129b84bb48446f40c08843 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment