@bemit/consent-ui-formanta
Version:
© 2022 [bemit](https://bemit.eu)
365 lines • 10.2 kB
JavaScript
import React from 'react';
import { IcArrowDropUp } from '@bemit/consent-ui-formanta/Icons/IcArrowDropUp';
import { IcArrowDropDown } from '@bemit/consent-ui-formanta/Icons/IcArrowDropDown';
import { IcCheckBox } from '@bemit/consent-ui-formanta/Icons/IcCheckBox';
import { IcCheckBoxIndeterminate } from '@bemit/consent-ui-formanta/Icons/IcCheckBoxIndeterminate';
import { IcCheckBoxOutline } from '@bemit/consent-ui-formanta/Icons/IcCheckBoxOutline';
import { IcInfo } from '@bemit/consent-ui-formanta/Icons/IcInfo';
import AutoHeight from 'react-animate-height';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const CustomCheckBox = ({
checked,
onChange,
disabled,
e2e
}) => {
return _jsx("button", {
style: {
border: 0,
padding: 6,
transform: 'none',
display: 'flex',
alignItems: 'center'
},
disabled: disabled,
onClick: () => onChange(),
title: disabled ? 'This group is required' : `Turn this group ${checked ? 'off' : 'on'}`,
"data-e2e-cc": e2e ? 'cc-group-toggle' : undefined,
children: checked ? checked === true || checked === 2 ? _jsx(IcCheckBox, {
fontSize: '1.5em',
style: {
color: '#6ab42a'
}
}) : _jsx(IcCheckBoxIndeterminate, {
fontSize: '1.5em'
}) : _jsx(IcCheckBoxOutline, {
fontSize: '1.5em'
})
});
};
export const ConsentUiBoxGroup = ({
group,
policies,
groupPrefer,
toggleGroup,
services,
labels,
e2e
}) => {
const [open, setOpen] = React.useState(false);
const {
id,
title,
desc,
noSelect
} = group;
return _jsxs("div", {
children: [_jsxs("div", {
style: {
display: 'flex'
},
className: 'h6',
children: [_jsxs("button", {
onClick: () => setOpen(o => !o),
"aria-expanded": open,
"aria-controls": 'cmp-sec-' + id,
style: {
flexGrow: 1,
border: 0,
transform: 'none',
textTransform: 'none',
textAlign: 'left',
fontFamily: 'inherit',
fontSize: 'inherit',
padding: '3px 4px',
display: 'inline-flex',
alignItems: 'center'
},
"data-e2e-cc": e2e ? 'cc-group-dropdown' : undefined,
children: [open ? _jsx(IcArrowDropUp, {
fontSize: '1.25rem',
style: {
marginRight: 6
}
}) : _jsx(IcArrowDropDown, {
fontSize: '1.25rem',
style: {
marginRight: 6
}
}), _jsx("span", {
style: {
display: 'block'
},
children: title
})]
}), _jsx(CustomCheckBox, {
checked: noSelect ? true : groupPrefer,
disabled: noSelect,
onChange: () => toggleGroup(id)
})]
}), desc ? _jsxs("div", {
className: 'pr1',
style: {
display: 'flex'
},
children: [_jsx(IcArrowDropDown, {
style: {
visibility: 'hidden',
marginRight: 9
},
fontSize: '1.25rem'
}), _jsx("p", {
className: 'caption',
style: {
margin: 0,
marginBottom: 8
},
children: desc
})]
}) : null, _jsx(AutoHeight, {
duration: 500,
height: open ? 'auto' : 0,
style: {
marginLeft: 29
},
children: services.map((entry, i) => [_jsx(ConsentUiBoxGroupService, {
service: entry,
policies: policies,
isLast: i >= services.length - 1,
labels: labels,
e2e: e2e
}, i)])
})]
});
};
export const ConsentUiBoxGroupService = ({
service,
policies,
isLast,
labels,
e2e
}) => {
const [open, setOpen] = React.useState(false);
return _jsx(_Fragment, {
children: _jsxs("div", {
className: 'mb1',
style: {
fontSize: '0.82rem'
},
children: [_jsxs("div", {
className: 'mb1',
children: [_jsxs("a", {
style: {
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(IcInfo, {
fontSize: '1.25em',
style: {
marginLeft: 4,
opacity: 0.5
}
})]
}), service.desc?.map((d, i) => _jsx("p", {
style: {
fontSize: 'inherit',
marginTop: 0,
marginBottom: 8
},
children: d
}, i))]
}), _jsxs(AutoHeight, {
duration: 500,
height: open ? 'auto' : 0,
children: [policies[service.id] ? _jsx("p", {
style: {
fontWeight: 'bold',
marginTop: 0,
marginBottom: 8
},
children: _jsx("a", {
href: policies[service.id],
rel: 'noreferrer noopener',
target: '_blank',
"data-e2e-cc": e2e ? 'cc-service-policy' : undefined,
children: labels.servicePolicyLabel
})
}) : null, service?.receives ? _jsxs("div", {
className: 'mb2',
children: [_jsx("p", {
className: 'body1 bold',
style: {
marginTop: 0,
marginBottom: 8
},
children: labels.serviceReceives
}), service.receives.map(r => _jsx("span", {
className: 'btn btn-sm btn-round btn-info btn-info-o ev0',
style: {
marginRight: 4,
marginBottom: 4,
background: 'transparent',
transform: 'none',
cursor: 'auto',
opacity: 1
},
children: r
}, r))]
}) : null, service?.stores ? _jsxs("div", {
className: 'mb2',
children: [_jsx("p", {
className: 'subtitle2',
style: {
marginTop: 0,
marginBottom: 8
},
children: labels.serviceStores
}), _jsx("div", {
style: {
display: 'flex',
overflow: 'auto'
},
children: _jsx(ConsentUiBoxGroupServiceStoreEntry, {
stores: service.stores,
labels: labels
})
})]
}) : null]
}), isLast ? null : _jsx("hr", {})]
})
});
};
export const ConsentUiBoxGroupServiceStoreEntry = ({
stores,
labels
}) => {
return _jsx(_Fragment, {
children: _jsxs("table", {
children: [_jsx("thead", {
children: _jsxs("tr", {
children: [_jsx("td", {
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresFeature
}), _jsx("td", {
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresName
}), _jsx("td", {
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresExpires
}), _jsx("td", {
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresDomain
}), _jsx("td", {
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresIn
}), _jsx("td", {
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresDescription
})]
})
}), _jsx("tbody", {
children: stores?.map((feature, i) => [_jsx("tr", {
children: _jsx("td", {
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
rowSpan: (feature.entries?.length || 1) + 1,
children: feature.title
})
}, i), feature.entries?.map((entry, j) => _jsxs("tr", {
children: [_jsx("td", {
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: _jsx("code", {
style: {
background: 'transparent',
color: 'inherit'
},
children: entry.name
})
}), _jsx("td", {
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.info.validity ? _jsx("span", {
style: {
fontSize: 'inherit',
display: 'block',
fontStyle: 'italic',
marginTop: 2
},
children: entry.info.validity
}) : null
}), _jsx("td", {
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.domain ? _jsx("code", {
style: {
background: 'transparent',
color: 'inherit'
},
children: entry.domain
}) : _jsx("code", {
style: {
background: 'transparent',
color: 'inherit'
},
children: window.location.origin
})
}), _jsx("td", {
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.is
}), _jsx("td", {
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12,
minWidth: 120
},
children: entry.info.desc
})]
}, j))])
})]
})
});
};