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

import React from 'react';
import { useConsent } from '@bemit/consent-ui-react/ConsentUiProvider';
import { ConsentUiBoxGroup } from '@bemit/consent-ui-formanta/ConsentUiBox';
import { usePreferState } from '@bemit/consent-ui-react/usePreferState';
import { IcGear } from '@bemit/consent-ui-formanta/Icons/IcGear';
import { IcLink } from '@bemit/consent-ui-formanta/Icons/IcLink';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ConsentUiBox = ({
  showDetails,
  setShowDetails,
  e2e,
  showSelectEssential,
  labels
}) => {
  const {
    giveConsent,
    locale,
    userPrefers,
    prefersInitial,
    prefersDefault,
    ownId,
    localeConsent
  } = useConsent();
  const {
    nextUserPrefers,
    toggleGroup
  } = usePreferState(userPrefers, prefersInitial);
  const localeDefinition = localeConsent[locale];
  const {
    title,
    intro,
    desc,
    groups,
    policies,
    services
  } = localeDefinition;
  const links = _jsxs(_Fragment, {
    children: [_jsxs("a", {
      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: '1em',
        style: {
          marginRight: 4
        }
      }), labels.policyLabel]
    }), setShowDetails ? _jsxs("a", {
      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: '1em',
        style: {
          marginRight: 4
        }
      }), showDetails ? labels.detailsHide : labels.detailsShow]
    }) : null]
  });
  return _jsxs(_Fragment, {
    children: [_jsxs("div", {
      className: 'pt2 px2',
      children: [_jsx("p", {
        className: 'h5',
        style: {
          marginTop: 0
        },
        children: title
      }), intro?.map((d, i) => _jsx("p", {
        className: 'body2',
        style: {
          marginTop: 0
        },
        children: d
      }, i))]
    }), showDetails ? _jsxs("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'auto'
      },
      children: [_jsxs("div", {
        className: 'px2',
        children: [labels.detailsTitle ? _jsx("p", {
          className: 'subtitle1',
          children: labels.detailsTitle
        }) : null, desc?.map((d, i) => _jsx("p", {
          className: 'body2',
          style: {
            marginTop: 0,
            marginBottom: 8
          },
          children: d
        }, i))]
      }), _jsx("div", {
        className: 'pb2 px2',
        children: groups?.map((s, i) => [_jsx(ConsentUiBoxGroup, {
          policies: policies,
          groupPrefer: nextUserPrefers?.groups?.[s.id],
          toggleGroup: toggleGroup,
          group: s,
          services: services.filter(sv => sv.group === s.id),
          labels: labels,
          e2e: e2e
        }, i), i < groups.length - 1 ? _jsx("div", {
          children: _jsx("hr", {})
        }, i + '.b') : null])
      })]
    }) : null, _jsxs("div", {
      className: 'pb2 px2',
      style: {
        display: 'flex',
        marginTop: 4,
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: [_jsx("div", {
        style: {
          fontSize: '0.82rem'
        },
        className: 'py1',
        children: links
      }), _jsxs("div", {
        style: {
          marginLeft: 'auto'
        },
        children: [showSelectEssential ? _jsx("button", {
          className: 'btn',
          onClick: () => giveConsent(),
          style: {
            marginRight: 8,
            flexShrink: 0,
            textTransform: 'none'
          },
          "data-e2e-cc": e2e ? 'cc-consent-essentials' : undefined,
          children: labels.btnOnlyEssential
        }) : null, _jsx("button", {
          className: 'btn btn-primary',
          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
        })]
      })]
    })]
  });
};