@bemit/consent-ui-mui
Version:
424 lines (423 loc) • 17.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ConsentUiBoxGroupServiceStoreEntry = exports.ConsentUiBoxGroupService = exports.ConsentUiBoxGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _Box = _interopRequireDefault(require("@mui/material/Box"));
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
var _Link = _interopRequireDefault(require("@mui/material/Link"));
var _Button = _interopRequireDefault(require("@mui/material/Button"));
var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
var _Table = _interopRequireDefault(require("@mui/material/Table"));
var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var ConsentUiBoxGroup = exports.ConsentUiBoxGroup = function ConsentUiBoxGroup(_ref) {
var group = _ref.group,
policies = _ref.policies,
groupPrefer = _ref.groupPrefer,
toggleGroup = _ref.toggleGroup,
servicesPrefer = _ref.servicesPrefer,
nextServicesPrefer = _ref.nextServicesPrefer,
toggleService = _ref.toggleService,
services = _ref.services,
labels = _ref.labels,
e2e = _ref.e2e;
var _React$useState = _react["default"].useState([]),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeServices = _React$useState2[0],
setActiveServices = _React$useState2[1];
var _React$useState3 = _react["default"].useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
open = _React$useState4[0],
setOpen = _React$useState4[1];
var id = group.id,
title = group.title,
desc = group.desc,
noSelect = group.noSelect;
_react["default"].useEffect(function () {
var ids = Object.keys(servicesPrefer || {}).filter(function (s) {
return (servicesPrefer === null || servicesPrefer === void 0 ? void 0 : servicesPrefer[s]) && services.find(function (s2) {
return s2.id === s && s2.group === id;
});
});
setActiveServices(ids);
}, [servicesPrefer, services, setActiveServices, id]);
return (0, _jsxRuntime.jsxs)(_Box["default"], {
pb: 1,
children: [(0, _jsxRuntime.jsxs)(_Typography["default"], {
variant: 'subtitle1',
component: 'div',
style: {
display: 'flex'
},
gutterBottom: true,
children: [(0, _jsxRuntime.jsx)(_Button["default"], {
fullWidth: true,
onClick: function onClick() {
return setOpen(function (o) {
return !o;
});
},
style: {
textTransform: 'none',
justifyContent: 'flex-start',
textAlign: 'left',
fontFamily: 'inherit',
fontSize: 'inherit',
padding: '3px 4px'
},
startIcon: open ? (0, _jsxRuntime.jsx)(_ArrowDropUp["default"], {}) : (0, _jsxRuntime.jsx)(_ArrowDropDown["default"], {}),
"data-e2e-cc": e2e ? 'cc-group-dropdown' : undefined,
children: (0, _jsxRuntime.jsxs)("div", {
style: {
display: 'flex',
flexWrap: 'wrap',
marginTop: !groupPrefer && activeServices.length ? -6 : 0
},
children: [(0, _jsxRuntime.jsx)("span", {
style: {
display: 'block',
width: '100%'
},
children: title
}), !groupPrefer && activeServices.length ? (0, _jsxRuntime.jsxs)(_Typography["default"], {
variant: 'caption',
color: 'textSecondary',
style: {
lineHeight: 1,
marginBottom: 3
},
children: [activeServices.length, ' ', activeServices.length === 1 ? labels.serviceActive : labels.servicesActive]
}) : null]
})
}), (0, _jsxRuntime.jsx)(_Switch["default"], {
checked: Boolean(noSelect || groupPrefer),
disabled: noSelect,
onChange: function onChange() {
return toggleGroup(id);
},
"data-e2e-cc": e2e ? 'cc-group-toggle' : undefined
})]
}), desc ? (0, _jsxRuntime.jsxs)(_Box["default"], {
pb: open ? 1 : 0,
pr: 1,
style: {
display: 'flex'
},
children: [(0, _jsxRuntime.jsx)(_ArrowDropDown["default"], {
style: {
visibility: 'hidden',
marginRight: 8
},
fontSize: 'small'
}), (0, _jsxRuntime.jsx)(_Typography["default"], {
variant: 'caption',
children: desc
})]
}) : null, (0, _jsxRuntime.jsx)(_Collapse["default"], {
"in": open,
timeout: "auto",
style: {
marginLeft: 29
},
children: services.map(function (entry, i) {
return [(0, _jsxRuntime.jsx)(ConsentUiBoxGroupService, {
service: entry,
policies: policies,
isLast: i >= services.length - 1,
inheritsActive: Boolean(noSelect || groupPrefer),
servicesPrefer: nextServicesPrefer,
toggleService: toggleService,
labels: labels,
e2e: e2e
}, i)];
})
})]
});
};
var ConsentUiBoxGroupService = exports.ConsentUiBoxGroupService = function ConsentUiBoxGroupService(_ref2) {
var _service$desc;
var service = _ref2.service,
policies = _ref2.policies,
isLast = _ref2.isLast,
inheritsActive = _ref2.inheritsActive,
servicesPrefer = _ref2.servicesPrefer,
toggleService = _ref2.toggleService,
labels = _ref2.labels,
e2e = _ref2.e2e;
var _React$useState5 = _react["default"].useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
open = _React$useState6[0],
setOpen = _React$useState6[1];
return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: (0, _jsxRuntime.jsxs)(_Box["default"], {
style: {
fontSize: '0.82rem'
},
mb: 1,
children: [(0, _jsxRuntime.jsxs)(_Box["default"], {
mb: 1,
children: [(0, _jsxRuntime.jsxs)(_Box["default"], {
mb: 1,
style: {
display: 'flex'
},
children: [(0, _jsxRuntime.jsxs)(_Link["default"], {
style: {
flexGrow: 1,
fontSize: 'inherit',
fontWeight: 'bold',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
cursor: 'pointer'
},
onClick: function onClick() {
return setOpen(function (o) {
return !o;
});
},
"data-e2e-cc": e2e ? 'cc-service-details' : undefined,
children: [(0, _jsxRuntime.jsx)("span", {
children: service.title
}), (0, _jsxRuntime.jsx)(_IconButton["default"], {
size: 'small',
style: {
marginLeft: 4,
opacity: 0.5
},
children: (0, _jsxRuntime.jsx)(_Info["default"], {
fontSize: 'inherit'
})
})]
}), service.canSelect ? (0, _jsxRuntime.jsx)(_Box["default"], {
mr: 0.5,
ml: 1,
children: (0, _jsxRuntime.jsx)(_Switch["default"], {
checked: Boolean(servicesPrefer === null || servicesPrefer === void 0 ? void 0 : servicesPrefer[service.id]) || inheritsActive,
disabled: inheritsActive,
size: 'small',
edge: false,
onChange: function onChange() {
return toggleService(service.id);
},
"data-e2e-cc": e2e ? 'cc-service-toggle' : undefined
})
}) : null]
}), (_service$desc = service.desc) === null || _service$desc === void 0 ? void 0 : _service$desc.map(function (d, i) {
return (0, _jsxRuntime.jsx)(_Typography["default"], {
gutterBottom: true,
style: {
fontSize: 'inherit'
},
children: d
}, i);
})]
}), (0, _jsxRuntime.jsxs)(_Collapse["default"], {
"in": open,
timeout: "auto",
children: [policies[service.id] ? (0, _jsxRuntime.jsx)(_Box["default"], {
mb: 1,
children: (0, _jsxRuntime.jsx)(_Typography["default"], {
style: {
fontSize: 'inherit',
fontWeight: 'bold'
},
children: (0, _jsxRuntime.jsx)(_Link["default"], {
href: policies[service.id],
color: 'inherit',
rel: 'noreferrer noopener',
target: '_blank',
"data-e2e-cc": e2e ? 'cc-service-policy' : undefined,
children: labels.servicePolicyLabel
})
})
}) : null, service !== null && service !== void 0 && service.receives ? (0, _jsxRuntime.jsxs)(_Box["default"], {
mb: 2,
"data-e2e-cc": e2e ? 'cc-service-receives' : undefined,
children: [(0, _jsxRuntime.jsx)(_Typography["default"], {
variant: 'subtitle2',
gutterBottom: true,
children: labels.serviceReceives
}), service.receives.map(function (r) {
return (0, _jsxRuntime.jsx)(_Chip["default"], {
size: 'small',
variant: 'outlined',
label: r,
style: {
marginRight: 4,
marginBottom: 4
}
}, r);
})]
}) : null, service !== null && service !== void 0 && service.stores ? (0, _jsxRuntime.jsxs)(_Box["default"], {
mb: 2,
"data-e2e-cc": e2e ? 'cc-service-stores' : undefined,
children: [(0, _jsxRuntime.jsx)(_Typography["default"], {
variant: 'subtitle2',
gutterBottom: true,
children: labels.serviceStores
}), (0, _jsxRuntime.jsx)(_Box["default"], {
style: {
display: 'flex',
overflow: 'auto'
},
children: (0, _jsxRuntime.jsx)(ConsentUiBoxGroupServiceStoreEntry, {
stores: service.stores,
labels: labels
})
})]
}) : null]
}), isLast ? null : (0, _jsxRuntime.jsx)(_Divider["default"], {})]
})
});
};
var ConsentUiBoxGroupServiceStoreEntry = exports.ConsentUiBoxGroupServiceStoreEntry = function ConsentUiBoxGroupServiceStoreEntry(_ref3) {
var stores = _ref3.stores,
labels = _ref3.labels;
return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: (0, _jsxRuntime.jsxs)(_Table["default"], {
size: 'small',
children: [(0, _jsxRuntime.jsx)(_TableHead["default"], {
children: (0, _jsxRuntime.jsxs)(_TableRow["default"], {
children: [(0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresFeature
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresName
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresExpires
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresDomain
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresIn
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
paddingLeft: 8,
paddingRight: 12
},
children: labels.serviceStoresDescription
})]
})
}), (0, _jsxRuntime.jsx)(_TableBody["default"], {
children: stores === null || stores === void 0 ? void 0 : stores.map(function (feature, i) {
var _feature$entries, _feature$entries2;
return [(0, _jsxRuntime.jsx)(_TableRow["default"], {
children: (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
rowSpan: (((_feature$entries = feature.entries) === null || _feature$entries === void 0 ? void 0 : _feature$entries.length) || 1) + 1,
children: feature.title
})
}, i), (_feature$entries2 = feature.entries) === null || _feature$entries2 === void 0 ? void 0 : _feature$entries2.map(function (entry, j) {
return (0, _jsxRuntime.jsxs)(_TableRow["default"], {
children: [(0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: (0, _jsxRuntime.jsx)("code", {
children: entry.name
})
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.info.validity ? (0, _jsxRuntime.jsx)(_Typography["default"], {
component: 'span',
style: {
fontSize: 'inherit',
display: 'block',
fontStyle: 'italic',
marginTop: 2
},
children: entry.info.validity
}) : null
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.domain ? (0, _jsxRuntime.jsx)("code", {
children: entry.domain
}) : (0, _jsxRuntime.jsx)("code", {
children: window.location.origin
})
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.is
}), (0, _jsxRuntime.jsx)(_TableCell["default"], {
size: 'small',
style: {
fontSize: '0.82rem',
paddingLeft: 8,
paddingRight: 12
},
children: entry.info.desc
})]
}, j);
})];
})
})]
})
});
};