72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Chip from '@mui/material/Chip';
|
|
import {
|
|
TINT_CHIP,
|
|
TINT_PILL_ACTIVE,
|
|
TINT_STRONG,
|
|
} from '../../../colors';
|
|
|
|
const taxPillSx = {
|
|
height: 28,
|
|
fontSize: 13,
|
|
fontWeight: 600,
|
|
'& .MuiChip-label': { px: 1 },
|
|
};
|
|
|
|
export class TaxRatePills extends Component {
|
|
render() {
|
|
const { rates, selected, onSelect, readOnly } = this.props;
|
|
return (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 28 }}>
|
|
{rates.map((rate) => {
|
|
const active = Number(selected) === Number(rate);
|
|
return (
|
|
<Chip
|
|
key={rate}
|
|
size="small"
|
|
label={`${rate} %`}
|
|
onClick={readOnly || !onSelect ? undefined : () => onSelect(rate)}
|
|
sx={{
|
|
...taxPillSx,
|
|
visibility: active || !readOnly ? 'visible' : 'hidden',
|
|
bgcolor: active ? TINT_PILL_ACTIVE : TINT_CHIP,
|
|
...(readOnly
|
|
? {}
|
|
: {
|
|
cursor: 'pointer',
|
|
'&:hover': { bgcolor: TINT_STRONG },
|
|
}),
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class PriceTaxRow extends Component {
|
|
render() {
|
|
const { rates, selected, onSelectTax, readOnly } = this.props;
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 0.5,
|
|
flexWrap: 'wrap',
|
|
minHeight: 36,
|
|
}}
|
|
>
|
|
<TaxRatePills
|
|
rates={rates}
|
|
selected={selected}
|
|
onSelect={onSelectTax}
|
|
readOnly={readOnly}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|