127 lines
4.4 KiB
TypeScript
127 lines
4.4 KiB
TypeScript
// React
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
// Redux
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
// import { actionCreator as shopCartActionCreator } from '../../../store/reducers/ShopCart'
|
|
import { ApplicationState } from '../../../store'
|
|
|
|
import { Container } from 'reactstrap'
|
|
import { FeatherIcon } from '../../../components/FeatherIcons'
|
|
|
|
import style from './scss/style.module.scss'
|
|
|
|
|
|
const Cart = () => {
|
|
const dispatch = useDispatch()
|
|
const { content, shopCart } = useSelector((state: ApplicationState) => state)
|
|
|
|
const {
|
|
currencySymbol = ""
|
|
} = content?.localization ? content.localization : {}
|
|
|
|
const {
|
|
titleSection = {
|
|
title: "",
|
|
text: ""
|
|
},
|
|
productsSection = {
|
|
product: "",
|
|
price: "",
|
|
quantity: "",
|
|
subtotal: "",
|
|
continueShopping: {
|
|
target: "#",
|
|
anchorText: ""
|
|
},
|
|
submit: {
|
|
title: ""
|
|
}
|
|
}
|
|
|
|
} = content?.shopCart ? content.shopCart : {}
|
|
|
|
const [subtotal, setSubtotal] = useState<number>(0)
|
|
|
|
useEffect(() => {
|
|
if(shopCart?.items) {
|
|
let newSubtotal = 0
|
|
shopCart.items.forEach(item => {
|
|
if(item.quantity)
|
|
newSubtotal += (item.newPrice ? item.newPrice : item.price) * item.quantity
|
|
})
|
|
setSubtotal(newSubtotal)
|
|
}
|
|
|
|
}, [shopCart?.items])
|
|
|
|
return <Container fluid>
|
|
<section className="pt-5 pb-5">
|
|
<div className="row w-100">
|
|
<div className="col-lg-12 col-md-12 col-12">
|
|
<h3 className="display-5 mb-2 text-center">{titleSection.title}</h3>
|
|
<p className="mb-5 text-center"><i className="text-info font-weight-bold">{shopCart?.items ? shopCart.items.length : 0}</i> {titleSection.text}</p>
|
|
<table id="shoppingCart" className="table table-condensed table-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th style={{ width: "60%" }}>{productsSection.product}</th>
|
|
<th style={{ width: "12%" }}>{productsSection.price}</th>
|
|
<th style={{ width: "10%" }}>{productsSection.quantity}</th>
|
|
<th style={{ width: "16%" }}></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{(shopCart?.items ? shopCart.items : []).map((item, index) => <tr key={index}>
|
|
<td data-th="Product">
|
|
<div className="row">
|
|
<div className="col-md-3 text-left">
|
|
<img src="https://dummyimage.com/250x250/ced4da/6c757d.jpg" alt="" className="img-fluid d-none d-md-block rounded mb-2 shadow" />
|
|
</div>
|
|
<div className="col-md-9 text-left mt-sm-2">
|
|
<h4>{item.title}</h4>
|
|
<p className="font-weight-light">{item.brandName}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td data-th="Price">{item.newPrice
|
|
? <><span className="text-muted text-decoration-line-through">{currencySymbol}{item.price.toFixed(2)}</span> <span>{currencySymbol}{item.newPrice.toFixed(2)}</span></>
|
|
: <span>{currencySymbol}{item.price.toFixed(2)}</span>}</td>
|
|
<td data-th="Quantity">
|
|
<input type="number" className="form-control form-control-lg text-center" value={item.quantity} />
|
|
</td>
|
|
<td className="actions" data-th="">
|
|
<div className="text-right">
|
|
<button className="btn btn-white border-secondary bg-white btn-md mb-2">
|
|
<FeatherIcon icon="trash-2" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>)}
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
<div className="float-right text-right">
|
|
<h4>{productsSection.subtotal}</h4>
|
|
<h1>{currencySymbol}{subtotal}</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row mt-4 d-flex align-items-center">
|
|
<div className="col-sm-6 order-md-2 text-right">
|
|
<a href="catalog.html" className="btn btn-primary mb-4 btn-lg pl-5 pr-5">{productsSection.submit.title}</a>
|
|
</div>
|
|
<div className="col-sm-6 mb-3 mb-m-1 order-md-1 text-md-left">
|
|
<a href={productsSection.continueShopping.target}>
|
|
<FeatherIcon icon="arrow-left" /> {productsSection.continueShopping.anchorText}</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
}
|
|
|
|
export {
|
|
Cart
|
|
} |