83 lines
2.2 KiB
JavaScript
83 lines
2.2 KiB
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Chip from '@mui/material/Chip';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
|
|
|
|
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 ? 'rgba(0, 0, 0, 0.14)' : 'rgba(0, 0, 0, 0.06)',
|
|
...(readOnly
|
|
? {}
|
|
: {
|
|
cursor: 'pointer',
|
|
'&:hover': { bgcolor: 'rgba(0, 0, 0, 0.12)' },
|
|
}),
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class PriceTaxRow extends Component {
|
|
render() {
|
|
const { rates, selected, onSelectTax, readOnly, onOpenTiers } = 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}
|
|
/>
|
|
<IconButton
|
|
type="button"
|
|
size="small"
|
|
aria-label="Staffelpreise"
|
|
disabled={readOnly}
|
|
onClick={readOnly ? undefined : onOpenTiers}
|
|
sx={{
|
|
p: 0.5,
|
|
visibility: readOnly ? 'hidden' : 'visible',
|
|
pointerEvents: readOnly ? 'none' : 'auto',
|
|
}}
|
|
>
|
|
<LayersOutlinedIcon sx={{ fontSize: 28 }} />
|
|
</IconButton>
|
|
</Box>
|
|
);
|
|
}
|
|
}
|