73 lines
2.5 KiB
Python
73 lines
2.5 KiB
Python
import React, { useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import { Media } from 'reactstrap';
|
|
import Flex from '../common/Flex';
|
|
import AppContext from '../../context/Context';
|
|
import { Link } from 'react-router-dom';
|
|
import FalconProgress from '../common/FalconProgress';
|
|
|
|
const getProductItemCalculatedData = (unit, price, totalPrice) => {
|
|
const productTotalPrice = unit * price;
|
|
const percentage = ((productTotalPrice * 100) / totalPrice).toFixed(0);
|
|
return { productTotalPrice, percentage };
|
|
};
|
|
|
|
const BestSellingProduct = ({ product, totalPrice, isLast }) => {
|
|
const { currency } = useContext(AppContext);
|
|
const { img, title, type, unit, price } = product;
|
|
const { productTotalPrice, percentage } = getProductItemCalculatedData(unit, price, totalPrice);
|
|
|
|
return (
|
|
<tr className={classNames({ 'border-bottom border-200': !isLast })}>
|
|
<td>
|
|
<Media className="align-items-center position-relative">
|
|
<img className="rounded border border-200" src={img} width="60" alt={title} />
|
|
<Media body className="ml-3">
|
|
<h6 className="mb-1 font-weight-semi-bold">
|
|
<Link className="text-dark stretched-link" to="#!">
|
|
{title}
|
|
</Link>
|
|
</h6>
|
|
<p className="font-weight-semi-bold mb-0 text-500">{type}</p>
|
|
</Media>
|
|
</Media>
|
|
</td>
|
|
<td className="align-middle text-right font-weight-semi-bold">
|
|
{currency}
|
|
{productTotalPrice}
|
|
</td>
|
|
<td className="align-middle pr-card">
|
|
<Flex align="center" justify="between">
|
|
<FalconProgress
|
|
value={percentage}
|
|
color="primary"
|
|
className="w-100 rounded-soft bg-200"
|
|
barClassName="rounded-capsule"
|
|
style={{ height: 5, maxWidth: 54 }}
|
|
/>
|
|
|
|
<div className="font-weight-semi-bold ml-2">{percentage}%</div>
|
|
</Flex>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
BestSellingProduct.propTypes = {
|
|
product: PropTypes.shape({
|
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
img: PropTypes.string.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
type: PropTypes.string.isRequired,
|
|
unit: PropTypes.number.isRequired,
|
|
price: PropTypes.number.isRequired
|
|
}).isRequired,
|
|
totalPrice: PropTypes.number.isRequired,
|
|
isLast: PropTypes.bool
|
|
};
|
|
|
|
BestSellingProduct.defaultProps = { isLast: false };
|
|
|
|
export default BestSellingProduct;
|