68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import React, { FC, useEffect } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { actionCreators as loaderActionCreators } from '../../../store/reducers/Loader'
|
|
import { actionCreators as shopItemActionCreators } from '../../../store/reducers/ShopItem'
|
|
|
|
import { Container } from 'reactstrap'
|
|
import { FeatherIcon } from '../../../components/FeatherIcons'
|
|
import { RelatedProducts } from '../RelatedProducts'
|
|
import { ApplicationState } from '../../../store'
|
|
|
|
|
|
const ShopItem = () => {
|
|
const params = useParams()
|
|
const dispatch = useDispatch()
|
|
|
|
const { content, shopItem } = useSelector((state: ApplicationState) => state)
|
|
const page = content?.shopItem
|
|
|
|
useEffect(() => {
|
|
// if(params?.slug)
|
|
// dispatch(shopItemActionCreators.requestShopItem({
|
|
// slug: params.slug
|
|
// }))
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
// shopItem?.isLoading
|
|
// ? dispatch(loaderActionCreators.show())
|
|
// : setTimeout(() => {
|
|
// dispatch(loaderActionCreators.hide())
|
|
// }, 1000)
|
|
}, [shopItem?.isLoading])
|
|
|
|
return <>
|
|
<section className="py-5">
|
|
<Container fluid className="px-4 px-lg-5 my-5">
|
|
<div className="row gx-4 gx-lg-5 align-items-center">
|
|
<div className="col-md-6"><img className="card-img-top mb-5 mb-md-0" {...shopItem?.image} /></div>
|
|
<div className="col-md-6">
|
|
<div className="small mb-1">{`SKU: ${shopItem?.sku}`}</div>
|
|
<h1 className="display-5 fw-bolder">{shopItem?.title}</h1>
|
|
<div className="fs-5 mb-5">
|
|
{shopItem?.newPrice
|
|
? <><span className="text-decoration-line-through">{shopItem?.price}</span> <span>{shopItem?.newPrice}</span></>
|
|
: <span>{shopItem?.price}</span>}
|
|
</div>
|
|
|
|
<section dangerouslySetInnerHTML={{ __html: shopItem?.text ? shopItem.text : '' }}></section>
|
|
|
|
<div className="d-flex">
|
|
<input className="form-control text-center me-3" id="inputQuantity" type="num" value="1" style={{maxWidth: "3rem"}} />
|
|
<button className="btn btn-outline-dark flex-shrink-0" type="button">
|
|
<FeatherIcon icon='shopping-cart' className="me-1"/> Add to cart</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<RelatedProducts />
|
|
</>
|
|
}
|
|
|
|
export {
|
|
ShopItem
|
|
} |