@bemit/consent-ui-formanta/cjs/ConsentUiBox/ConsentUiBoxGroup.js

© 2022 [bemit](https://bemit.eu)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CustomCheckBox = exports.ConsentUiBoxGroupServiceStoreEntry = exports.ConsentUiBoxGroupService = exports.ConsentUiBoxGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _IcArrowDropUp = require("@bemit/consent-ui-formanta/Icons/IcArrowDropUp");
var _IcArrowDropDown = require("@bemit/consent-ui-formanta/Icons/IcArrowDropDown");
var _IcCheckBox = require("@bemit/consent-ui-formanta/Icons/IcCheckBox");
var _IcCheckBoxIndeterminate = require("@bemit/consent-ui-formanta/Icons/IcCheckBoxIndeterminate");
var _IcCheckBoxOutline = require("@bemit/consent-ui-formanta/Icons/IcCheckBoxOutline");
var _IcInfo = require("@bemit/consent-ui-formanta/Icons/IcInfo");
var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
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 CustomCheckBox = exports.CustomCheckBox = function CustomCheckBox(_ref) {
  var checked = _ref.checked,
    onChange = _ref.onChange,
    disabled = _ref.disabled,
    e2e = _ref.e2e;
  return (0, _jsxRuntime.jsx)("button", {
    style: {
      border: 0,
      padding: 6,
      transform: 'none',
      display: 'flex',
      alignItems: 'center'
    },
    disabled: disabled,
    onClick: function onClick() {
      return onChange();
    },
    title: disabled ? 'This group is required' : "Turn this group ".concat(checked ? 'off' : 'on'),
    "data-e2e-cc": e2e ? 'cc-group-toggle' : undefined,
    children: checked ? checked === true || checked === 2 ? (0, _jsxRuntime.jsx)(_IcCheckBox.IcCheckBox, {
      fontSize: '1.5em',
      style: {
        color: '#6ab42a'
      }
    }) : (0, _jsxRuntime.jsx)(_IcCheckBoxIndeterminate.IcCheckBoxIndeterminate, {
      fontSize: '1.5em'
    }) : (0, _jsxRuntime.jsx)(_IcCheckBoxOutline.IcCheckBoxOutline, {
      fontSize: '1.5em'
    })
  });
};
var ConsentUiBoxGroup = exports.ConsentUiBoxGroup = function ConsentUiBoxGroup(_ref2) {
  var group = _ref2.group,
    policies = _ref2.policies,
    groupPrefer = _ref2.groupPrefer,
    toggleGroup = _ref2.toggleGroup,
    services = _ref2.services,
    labels = _ref2.labels,
    e2e = _ref2.e2e;
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    open = _React$useState2[0],
    setOpen = _React$useState2[1];
  var id = group.id,
    title = group.title,
    desc = group.desc,
    noSelect = group.noSelect;
  return (0, _jsxRuntime.jsxs)("div", {
    children: [(0, _jsxRuntime.jsxs)("div", {
      style: {
        display: 'flex'
      },
      className: 'h6',
      children: [(0, _jsxRuntime.jsxs)("button", {
        onClick: function onClick() {
          return setOpen(function (o) {
            return !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 ? (0, _jsxRuntime.jsx)(_IcArrowDropUp.IcArrowDropUp, {
          fontSize: '1.25rem',
          style: {
            marginRight: 6
          }
        }) : (0, _jsxRuntime.jsx)(_IcArrowDropDown.IcArrowDropDown, {
          fontSize: '1.25rem',
          style: {
            marginRight: 6
          }
        }), (0, _jsxRuntime.jsx)("span", {
          style: {
            display: 'block'
          },
          children: title
        })]
      }), (0, _jsxRuntime.jsx)(CustomCheckBox, {
        checked: noSelect ? true : groupPrefer,
        disabled: noSelect,
        onChange: function onChange() {
          return toggleGroup(id);
        }
      })]
    }), desc ? (0, _jsxRuntime.jsxs)("div", {
      className: 'pr1',
      style: {
        display: 'flex'
      },
      children: [(0, _jsxRuntime.jsx)(_IcArrowDropDown.IcArrowDropDown, {
        style: {
          visibility: 'hidden',
          marginRight: 9
        },
        fontSize: '1.25rem'
      }), (0, _jsxRuntime.jsx)("p", {
        className: 'caption',
        style: {
          margin: 0,
          marginBottom: 8
        },
        children: desc
      })]
    }) : null, (0, _jsxRuntime.jsx)(_reactAnimateHeight["default"], {
      duration: 500,
      height: open ? 'auto' : 0,
      style: {
        marginLeft: 29
      },
      children: services.map(function (entry, i) {
        return [(0, _jsxRuntime.jsx)(ConsentUiBoxGroupService, {
          service: entry,
          policies: policies,
          isLast: i >= services.length - 1,
          labels: labels,
          e2e: e2e
        }, i)];
      })
    })]
  });
};
var ConsentUiBoxGroupService = exports.ConsentUiBoxGroupService = function ConsentUiBoxGroupService(_ref3) {
  var _service$desc;
  var service = _ref3.service,
    policies = _ref3.policies,
    isLast = _ref3.isLast,
    labels = _ref3.labels,
    e2e = _ref3.e2e;
  var _React$useState3 = _react["default"].useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    open = _React$useState4[0],
    setOpen = _React$useState4[1];
  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: (0, _jsxRuntime.jsxs)("div", {
      className: 'mb1',
      style: {
        fontSize: '0.82rem'
      },
      children: [(0, _jsxRuntime.jsxs)("div", {
        className: 'mb1',
        children: [(0, _jsxRuntime.jsxs)("a", {
          style: {
            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)(_IcInfo.IcInfo, {
            fontSize: '1.25em',
            style: {
              marginLeft: 4,
              opacity: 0.5
            }
          })]
        }), (_service$desc = service.desc) === null || _service$desc === void 0 ? void 0 : _service$desc.map(function (d, i) {
          return (0, _jsxRuntime.jsx)("p", {
            style: {
              fontSize: 'inherit',
              marginTop: 0,
              marginBottom: 8
            },
            children: d
          }, i);
        })]
      }), (0, _jsxRuntime.jsxs)(_reactAnimateHeight["default"], {
        duration: 500,
        height: open ? 'auto' : 0,
        children: [policies[service.id] ? (0, _jsxRuntime.jsx)("p", {
          style: {
            fontWeight: 'bold',
            marginTop: 0,
            marginBottom: 8
          },
          children: (0, _jsxRuntime.jsx)("a", {
            href: policies[service.id],
            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)("div", {
          className: 'mb2',
          children: [(0, _jsxRuntime.jsx)("p", {
            className: 'body1 bold',
            style: {
              marginTop: 0,
              marginBottom: 8
            },
            children: labels.serviceReceives
          }), service.receives.map(function (r) {
            return (0, _jsxRuntime.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 !== null && service !== void 0 && service.stores ? (0, _jsxRuntime.jsxs)("div", {
          className: 'mb2',
          children: [(0, _jsxRuntime.jsx)("p", {
            className: 'subtitle2',
            style: {
              marginTop: 0,
              marginBottom: 8
            },
            children: labels.serviceStores
          }), (0, _jsxRuntime.jsx)("div", {
            style: {
              display: 'flex',
              overflow: 'auto'
            },
            children: (0, _jsxRuntime.jsx)(ConsentUiBoxGroupServiceStoreEntry, {
              stores: service.stores,
              labels: labels
            })
          })]
        }) : null]
      }), isLast ? null : (0, _jsxRuntime.jsx)("hr", {})]
    })
  });
};
var ConsentUiBoxGroupServiceStoreEntry = exports.ConsentUiBoxGroupServiceStoreEntry = function ConsentUiBoxGroupServiceStoreEntry(_ref4) {
  var stores = _ref4.stores,
    labels = _ref4.labels;
  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: (0, _jsxRuntime.jsxs)("table", {
      children: [(0, _jsxRuntime.jsx)("thead", {
        children: (0, _jsxRuntime.jsxs)("tr", {
          children: [(0, _jsxRuntime.jsx)("td", {
            style: {
              paddingLeft: 8,
              paddingRight: 12
            },
            children: labels.serviceStoresFeature
          }), (0, _jsxRuntime.jsx)("td", {
            style: {
              paddingLeft: 8,
              paddingRight: 12
            },
            children: labels.serviceStoresName
          }), (0, _jsxRuntime.jsx)("td", {
            style: {
              paddingLeft: 8,
              paddingRight: 12
            },
            children: labels.serviceStoresExpires
          }), (0, _jsxRuntime.jsx)("td", {
            style: {
              paddingLeft: 8,
              paddingRight: 12
            },
            children: labels.serviceStoresDomain
          }), (0, _jsxRuntime.jsx)("td", {
            style: {
              paddingLeft: 8,
              paddingRight: 12
            },
            children: labels.serviceStoresIn
          }), (0, _jsxRuntime.jsx)("td", {
            style: {
              paddingLeft: 8,
              paddingRight: 12
            },
            children: labels.serviceStoresDescription
          })]
        })
      }), (0, _jsxRuntime.jsx)("tbody", {
        children: stores === null || stores === void 0 ? void 0 : stores.map(function (feature, i) {
          var _feature$entries, _feature$entries2;
          return [(0, _jsxRuntime.jsx)("tr", {
            children: (0, _jsxRuntime.jsx)("td", {
              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)("tr", {
              children: [(0, _jsxRuntime.jsx)("td", {
                style: {
                  fontSize: '0.82rem',
                  paddingLeft: 8,
                  paddingRight: 12
                },
                children: (0, _jsxRuntime.jsx)("code", {
                  style: {
                    background: 'transparent',
                    color: 'inherit'
                  },
                  children: entry.name
                })
              }), (0, _jsxRuntime.jsx)("td", {
                style: {
                  fontSize: '0.82rem',
                  paddingLeft: 8,
                  paddingRight: 12
                },
                children: entry.info.validity ? (0, _jsxRuntime.jsx)("span", {
                  style: {
                    fontSize: 'inherit',
                    display: 'block',
                    fontStyle: 'italic',
                    marginTop: 2
                  },
                  children: entry.info.validity
                }) : null
              }), (0, _jsxRuntime.jsx)("td", {
                style: {
                  fontSize: '0.82rem',
                  paddingLeft: 8,
                  paddingRight: 12
                },
                children: entry.domain ? (0, _jsxRuntime.jsx)("code", {
                  style: {
                    background: 'transparent',
                    color: 'inherit'
                  },
                  children: entry.domain
                }) : (0, _jsxRuntime.jsx)("code", {
                  style: {
                    background: 'transparent',
                    color: 'inherit'
                  },
                  children: window.location.origin
                })
              }), (0, _jsxRuntime.jsx)("td", {
                style: {
                  fontSize: '0.82rem',
                  paddingLeft: 8,
                  paddingRight: 12
                },
                children: entry.is
              }), (0, _jsxRuntime.jsx)("td", {
                style: {
                  fontSize: '0.82rem',
                  paddingLeft: 8,
                  paddingRight: 12,
                  minWidth: 120
                },
                children: entry.info.desc
              })]
            }, j);
          })];
        })
      })]
    })
  });
};