@bemit/consent-ui-mui/ConsentUiBox/ConsentUiBox.js

import React from 'react';
import Box from '@mui/material/Box';
import IcLink from '@mui/icons-material/Link';
import IcGear from '@mui/icons-material/Settings';
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 Typography from '@mui/material/Typography';
import { useConsent } from '@bemit/consent-ui-react/ConsentUiProvider';
import { ConsentUiBoxGroup } from '@bemit/consent-ui-mui/ConsentUiBox';
import { usePreferState } from '@bemit/consent-ui-react/usePreferState';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ConsentUiBox = ({
  showDetails,
  setShowDetails,
  showSelectEssential,
  showEmptyGroups,
  labels,
  layout,
  e2e
}) => {
  const {
    giveConsent,
    locale,
    userPrefers,
    prefersInitial,
    prefersDefault,
    ownId,
    localeConsent
  } = useConsent();
  const {
    nextUserPrefers,
    toggleGroup,
    toggleService
  } = usePreferState(userPrefers, prefersInitial);
  const localeDefinition = localeConsent[locale];
  const {
    title,
    intro,
    desc,
    groups,
    policies,
    services
  } = localeDefinition;
  const links = _jsxs(_Fragment, {
    children: [_jsxs(Link, {
      color: 'textSecondary',
      href: '#',
      "data-e2e-cc": e2e ? 'cc-privacy' : undefined,
      onClick: e => {
        e.preventDefault();
        e.stopPropagation();
        const link = policies[ownId];
        if (!link) return;
        if (link.indexOf('http') === 0) {
          window.open(link, '_blank');
        }
      },
      style: {
        display: 'inline-flex',
        alignItems: 'center',
        marginRight: 6,
        cursor: 'pointer'
      },
      children: [_jsx(IcLink, {
        fontSize: 'inherit',
        style: {
          marginRight: 4
        }
      }), labels.policyLabel]
    }), setShowDetails ? _jsxs(Link, {
      color: 'textSecondary',
      href: '#',
      "data-e2e-cc": e2e ? 'cc-details' : undefined,
      onClick: e => {
        e.preventDefault();
        e.stopPropagation();
        setShowDetails(o => !o);
      },
      style: {
        display: 'inline-flex',
        alignItems: 'center',
        marginRight: 6,
        cursor: 'pointer'
      },
      children: [_jsx(IcGear, {
        fontSize: 'inherit',
        style: {
          marginRight: 4
        }
      }), showDetails ? labels.detailsHide : labels.detailsShow]
    }) : null]
  });
  const filteredGroups = groups.map(g => [g, services.filter(sv => sv.group === g.id)]).filter(([, s]) => showEmptyGroups || s.length);
  return _jsxs(_Fragment, {
    children: [_jsxs(Box, {
      pt: 2,
      px: 2,
      pb: showDetails ? 1 : 0,
      children: [_jsx(Typography, {
        variant: 'h5',
        gutterBottom: true,
        children: title
      }), _jsx(Collapse, {
        in: !showDetails,
        timeout: "auto",
        children: intro?.map((d, i) => _jsx(Typography, {
          variant: 'body2',
          gutterBottom: true,
          children: d
        }, i))
      }), layout === 'dense' ? null : _jsx(Box, {
        style: {
          fontSize: '0.82rem',
          marginTop: 4
        },
        mt: -1,
        children: links
      })]
    }), _jsxs(Collapse, {
      in: showDetails,
      timeout: "auto",
      unmountOnExit: true,
      style: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'auto'
      },
      children: [_jsxs(Box, {
        pb: 1,
        px: 2,
        children: [labels.detailsTitle ? _jsx(Typography, {
          variant: 'subtitle1',
          gutterBottom: true,
          children: labels.detailsTitle
        }) : null, desc?.map((d, i) => _jsx(Typography, {
          variant: 'body2',
          gutterBottom: true,
          children: d
        }, i))]
      }), _jsx(Box, {
        pt: 0,
        pb: 2,
        px: 2,
        children: filteredGroups?.map(([g, s], i, arr) => [_jsx(ConsentUiBoxGroup, {
          policies: policies,
          groupPrefer: nextUserPrefers?.groups?.[g.id],
          servicesPrefer: userPrefers?.services,
          nextServicesPrefer: nextUserPrefers?.services,
          toggleGroup: toggleGroup,
          toggleService: toggleService,
          labels: labels,
          group: g,
          e2e: e2e,
          services: s
        }, i), i < arr.length - 1 ? _jsx(Box, {
          pb: 1,
          children: _jsx(Divider, {})
        }, i + '.b') : null])
      })]
    }), _jsxs(Box, {
      pb: 2,
      px: 2,
      style: {
        display: 'flex',
        marginTop: 4,
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: [layout === 'dense' ? _jsx(Box, {
        style: {
          fontSize: '0.82rem'
        },
        py: layout === 'dense' ? 1 : 0,
        children: links
      }) : null, _jsxs(Box, {
        style: {
          marginLeft: 'auto'
        },
        children: [showSelectEssential ? _jsx(Button, {
          onClick: () => giveConsent(),
          style: {
            marginRight: 8,
            flexShrink: 0,
            textTransform: 'none'
          },
          "data-e2e-cc": e2e ? 'cc-consent-essentials' : undefined,
          children: labels.btnOnlyEssential
        }) : null, _jsx(Button, {
          variant: 'outlined',
          style: {
            textTransform: 'none',
            flexShrink: 0
          },
          onClick: () => showDetails ? giveConsent(nextUserPrefers) : giveConsent(prefersDefault),
          "data-e2e-cc": e2e ? 'cc-consent-accept' : undefined,
          children: showDetails ? labels.btnAcceptSave : labels.btnAcceptDefault
        })]
      })]
    })]
  });
};