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

import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Popover from '@mui/material/Popover';
import IcInfo from '@mui/icons-material/Info';
import IcLink from '@mui/icons-material/Link';
import { useConsent } from '@bemit/consent-ui-react/ConsentUiProvider';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ConsentUiBoxEmbed = ({
  service,
  serviceConsent,
  setServiceConsent,
  icon,
  serviceInfo,
  title,
  labels,
  infoBtnUp = 'sm',
  infoMaxWidth = 500,
  pos
}) => {
  const {
    breakpoints
  } = useTheme();
  const textRef = React.useRef(null);
  const [showInfo, setShowInfo] = React.useState(null);
  const {
    hasChosen,
    updateConsent,
    toggleUi,
    localeConsent,
    locale
  } = useConsent();
  React.useEffect(() => {
    setShowInfo(null);
  }, [setShowInfo, service]);
  const isSm = useMediaQuery(breakpoints.up(infoBtnUp));
  const localeInfo = locale ? localeConsent[locale] : undefined;
  const link = !serviceInfo?.embed?.noPolicy && localeInfo?.policies?.[service] ? _jsx(_Fragment, {
    children: _jsxs(Link, {
      color: 'textSecondary',
      href: '#',
      onClick: e => {
        e.preventDefault();
        e.stopPropagation();
        const link = localeInfo?.policies?.[service];
        if (!link) return;
        if (link.indexOf('http') === 0) {
          window.open(link, '_blank');
        }
      },
      style: {
        marginLeft: 6,
        cursor: 'pointer'
      },
      children: [_jsx(IcLink, {
        style: {
          marginRight: labels.policyLabel ? 4 : 0,
          fontSize: '1em',
          verticalAlign: 'middle'
        }
      }), labels.policyLabel]
    })
  }) : null;
  return _jsx(_Fragment, {
    children: serviceConsent ? null : hasChosen ? _jsxs(_Fragment, {
      children: [_jsxs(Box, {
        mx: 3,
        py: 3,
        my: 'auto',
        mt: pos === 'top' ? 1 : 'auto',
        mb: pos === 'bottom' ? 1 : 'auto',
        style: {
          display: 'flex',
          flexDirection: 'column',
          alignContent: 'center',
          alignItems: 'center'
        },
        children: [title ? _jsx(Typography, {
          gutterBottom: true,
          variant: 'subtitle1',
          children: title
        }) : null, labels.question ? _jsx(Typography, {
          gutterBottom: true,
          variant: 'body2',
          children: labels.question
        }) : null, _jsxs(Box, {
          children: [_jsx(Button, {
            onClick: () => setServiceConsent(1),
            style: {
              margin: 3
            },
            children: labels.btnOne
          }), _jsx(Button, {
            startIcon: icon,
            onClick: () => {
              setServiceConsent(1);
              updateConsent('services', service, 2);
            },
            variant: 'outlined',
            style: {
              margin: 3
            },
            children: labels.btnAll
          })]
        })]
      }), serviceInfo?.embed?.desc ? _jsx(_Fragment, {
        children: isSm ? _jsxs(Typography, {
          variant: 'caption',
          style: {
            opacity: 0.7,
            textAlign: 'center'
          },
          children: [serviceInfo.embed.desc, ' ', link]
        }) : _jsxs(_Fragment, {
          children: [_jsx(Button, {
            startIcon: _jsx(IcInfo, {}),
            size: 'small',
            onClick: e => setShowInfo(e.currentTarget),
            style: {
              opacity: 0.7
            },
            ref: textRef,
            children: labels.privacyBtn
          }), _jsx(Popover, {
            anchorEl: textRef.current,
            keepMounted: false,
            open: Boolean(showInfo),
            onClose: () => setShowInfo(null),
            anchorOrigin: {
              vertical: 'bottom',
              horizontal: 'center'
            },
            transformOrigin: {
              vertical: 'top',
              horizontal: 'center'
            },
            onClick: e => {
              e.preventDefault();
              e.stopPropagation();
              setShowInfo(null);
            },
            PaperProps: {
              style: {
                borderRadius: 6,
                maxWidth: infoMaxWidth
              }
            },
            children: _jsx(Box, {
              px: 2,
              py: 1,
              children: _jsxs(Typography, {
                variant: 'body2',
                style: {
                  opacity: 0.7,
                  textAlign: 'center'
                },
                children: [serviceInfo.embed.desc, ' ', link]
              })
            })
          })]
        })
      }) : null]
    }) : _jsxs(Box, {
      mx: 3,
      py: 3,
      mt: pos === 'top' ? 1 : 'auto',
      mb: pos === 'bottom' ? 1 : 'auto',
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignContent: 'center',
        alignItems: 'center'
      },
      children: [_jsx(Typography, {
        gutterBottom: true,
        children: labels.selectPrefFirstDesc
      }), _jsx(Button, {
        onClick: () => toggleUi(),
        style: {
          textTransform: 'none'
        },
        variant: 'outlined',
        children: labels.selectPrefFirstBtn
      })]
    })
  });
};