@bemit/consent-ui-mui
Version:
379 lines • 11.3 kB
JavaScript
import React from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Collapse from '@mui/material/Collapse';
import Divider from '@mui/material/Divider';
import Link from '@mui/material/Link';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import IcInfo from '@mui/icons-material/Info';
import IcDropDown from '@mui/icons-material/ArrowDropDown';
import IcDropUp from '@mui/icons-material/ArrowDropUp';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import Switch from '@mui/material/Switch';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ConsentUiBoxGroup = ({
group,
policies,
groupPrefer,
toggleGroup,
servicesPrefer,
nextServicesPrefer,
toggleService,
services,
labels,
e2e
}) => {
const [activeServices, setActiveServices] = React.useState([]);
const [open, setOpen] = React.useState(false);
const {
id,
title,
desc,
noSelect
} = group;
React.useEffect(() => {
const ids = Object.keys(servicesPrefer || {}).filter(s => servicesPrefer?.[s] && services.find(s2 => s2.id === s && s2.group === id));
setActiveServices(ids);
}, [servicesPrefer, services, setActiveServices, id]);
return _jsxs(Box, {
pb: 1,
children: [_jsxs(Typography, {
variant: 'subtitle1',
component: 'div',
style: {
display: 'flex'
},
gutterBottom: true,
children: [_jsx(Button, {
fullWidth: true,
onClick: () => setOpen(o => !o),
style: {
textTransform: 'none',
justifyContent: 'flex-start',
textAlign: 'left',
fontFamily: 'inherit',
fontSize: 'inherit',
padding: '3px 4px'
},
startIcon: open ? _jsx(IcDropUp, {}) : _jsx(IcDropDown, {}),
"data-e2e-cc": e2e ? 'cc-group-dropdown' : undefined,
children: _jsxs("div", {
style: {
display: 'flex',
flexWrap: 'wrap',
marginTop: !groupPrefer && activeServices.length ? -6 : 0
},
children: [_jsx("span", {
style: {
display: 'block',
width: '100%'
},
children: title
}), !groupPrefer && activeServices.length ? _jsxs(Typography, {
variant: 'caption',
color: 'textSecondary',
style: {
lineHeight: 1,
marginBottom: 3
},
children: [activeServices.length, ' ', activeServices.length === 1 ? labels.serviceActive : labels.servicesActive]
}) : null]
})
}), _jsx(Switch, {
checked: Boolean(noSelect || groupPrefer),
disabled: noSelect,
onChange: () => toggleGroup(id),
"data-e2e-cc": e2e ? 'cc-group-toggle' : undefined
})]
}), desc ? _jsxs(Box, {
pb: open ? 1 : 0,
pr: 1,
style: {
display: 'flex'
},
children: [_jsx(IcDropDown, {
style: {
visibility: 'hidden',
marginRight: 8
},
fontSize: 'small'
}), _jsx(Typography, {
variant: 'caption',
children: desc
})]
}) : null, _jsx(Collapse, {
in: open,
timeout: "auto",
style: {
marginLeft: 29
},
children: services.map((entry, i) => [_jsx(ConsentUiBoxGroupService, {
service: entry,
policies: policies,
isLast: i >= services.length - 1,
inheritsActive: Boolean(noSelect || groupPrefer),
servicesPrefer: nextServicesPrefer,
toggleService: toggleService,
labels: labels,
e2e: e2e
}, i)])
})]
});
};
export const ConsentUiBoxGroupService = ({
service,
policies,
isLast,
inheritsActive,
servicesPrefer,
toggleService,
labels,
e2e
}) => {
const [open, setOpen] = React.useState(false);
return _jsx(_Fragment, {
children: _jsxs(Box, {
style: {
fontSize: '0.82rem'
},
mb: 1,
children: [_jsxs(Box, {
mb: 1,
children: [_jsxs(Box, {
mb: 1,
style: {
display: 'flex'
},
children: [_jsxs(Link, {
style: {
flexGrow: 1,
fontSize: 'inherit',
fontWeight: 'bold',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
cursor: 'pointer'
},
onClick: () => setOpen(o => !o),
"data-e2e-cc": e2e ? 'cc-service-details' : undefined,
children: [_jsx("span", {
children: service.title
}), _jsx(IconButton, {
size: 'small',
style: {
marginLeft: 4,
opacity: 0.5
},
children: _jsx(IcInfo, {
fontSize: 'inherit'
})
})]
}), service.canSelect ? _jsx(Box, {
mr: 0.5,
ml: 1,
children: _jsx(Switch, {
checked: Boolean(servicesPrefer?.[service.id]) || inheritsActive,
disabled: inheritsActive,
size: 'small',
edge: false,
onChange: () => toggleService(service.id),
"data-e2e-cc": e2e ? 'cc-service-toggle' : undefined
})
}) : null]
}), service.desc?.map((d, i) => _jsx(Typography, {
gutterBottom: true,
style: {
fontSize: 'inherit'
},
children: d
}, i))]
}), _jsxs(Collapse, {
in: open,
timeout: "auto",
children: [policies[service.id] ? _jsx(Box, {
mb: 1,
children: _jsx(Typography, {
style: {
fontSize: 'inherit',
fontWeight: 'bold'
},
children: _jsx(Link, {
href: policies[service.id],
color: 'inherit',
rel: 'noreferrer noopener',
target: '_blank',
"data-e2e-cc": e2e ? 'cc-service-policy' : undefined,
children: labels.servicePolicyLabel
})
})
}) : null, service?.receives ? _jsxs(Box, {
mb: 2,
"data-e2e-cc": e2e ? 'cc-service-receives' : undefined,
children: [_jsx(Typography, {
variant: 'subtitle2',
gutterBottom: true,
children: labels.serviceReceives
}), service.receives.map(r => _jsx(Chip, {
size: 'small',
variant: 'outlined',
label: r,
style: {
marginRight: 4,
marginBottom: 4
}
}, r))]
}) : null, service?.stores ? _jsxs(Box, {
mb: 2,
"data-e2e-cc": e2e ? 'cc-service-stores' : undefined,
children: [_jsx(Typography, {
variant: 'subtitle2',
gutterBottom: true,
children: labels.serviceStores
}), _jsx(Box, {
style: {
display: 'flex',
overflow: 'auto'
},
children: _jsx(ConsentUiBoxGroupServiceStoreEntry, {
stores: service.stores,
labels: labels
})
})]
}) : null]
}), isLast ? null : _jsx(Divider, {})]
})
});
};
export const ConsentUiBoxGroupServiceStoreEntry = ({
stores,
labels
}) => {
return _jsx(_Fragment, {
children: _jsxs(Table, {
size: 'small',
children: [_jsx(TableHead, {
children: _jsxs(TableRow, {
children: [_jsx(TableCell, {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresFeature
}), _jsx(TableCell, {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresName
}), _jsx(TableCell, {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresExpires
}), _jsx(TableCell, {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresDomain
}), _jsx(TableCell, {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresIn
}), _jsx(TableCell, {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresDescription
})]
})
}), _jsx(TableBody, {
children: stores?.map((feature, i) => [_jsx(TableRow, {
children: _jsx(TableCell, {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
rowSpan: (feature.entries?.length || 1) + 1,
children: feature.title
})
}, i), feature.entries?.map((entry, j) => _jsxs(TableRow, {
children: [_jsx(TableCell, {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: _jsx("code", {
children: entry.name
})
}), _jsx(TableCell, {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.info.validity ? _jsx(Typography, {
component: 'span',
style: {
fontSize: 'inherit',
display: 'block',
fontStyle: 'italic',
marginTop: 2
},
children: entry.info.validity
}) : null
}), _jsx(TableCell, {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.domain ? _jsx("code", {
children: entry.domain
}) : _jsx("code", {
children: window.location.origin
})
}), _jsx(TableCell, {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.is
}), _jsx(TableCell, {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.info.desc
})]
}, j))])
})]
})
});
};