@shopgate/engage/tracking/components/CookieConsentModal/index.js

Shopgate's ENGAGE library.

import React, { useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import throttle from 'lodash/throttle';
import { Grid, I18n, Button, Modal, Link, ConditionalWrapper } from '@shopgate/engage/components';
import { appConfig } from '@shopgate/engage';
import classNames from 'classnames';
import connect from "./connector";
import cookieImage from "./tracking-opt-in.svg";
import styles from "./style";
import { svgToDataUrl } from "../../../core";

/**
 * The cookie consent modal component.
 * @param {Object} props The component props.
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const CookieConsentModal = ({
  isCookieConsentModalVisible,
  acceptAllCookies,
  acceptRequiredCookies,
  openPrivacySettings,
  privacyPolicyLink
}) => {
  const {
    cookieConsent: {
      modalMessage,
      modalTitle,
      modalButtonConfigureSettings,
      modalButtonOnlyRequired,
      modalButtonAcceptAll,
      modalImageURL,
      modalImageSVG,
      showRequiredCookiesButton
    } = {}
  } = appConfig;
  const imageSRC = useMemo(() => {
    if (!modalImageURL && !modalImageSVG) {
      return cookieImage;
    }
    if (modalImageURL) {
      return modalImageURL;
    }
    return svgToDataUrl(modalImageSVG, cookieImage);
  }, [modalImageSVG, modalImageURL]);

  // Button event handlers are throttled to prevent multiple clicks
  const handleAcceptAllCookies = useMemo(() => throttle(acceptAllCookies, 1000, {
    leading: true,
    trailing: false
  }), [acceptAllCookies]);
  const handleAcceptRequiredCookies = useMemo(() => throttle(acceptRequiredCookies, 1000, {
    leading: true,
    trailing: false
  }), [acceptRequiredCookies]);
  const handleOpenPrivacySettings = useMemo(() => throttle(openPrivacySettings, 1000, {
    leading: true,
    trailing: false
  }), [openPrivacySettings]);
  useEffect(() => () => {
    handleAcceptAllCookies.cancel();
    handleAcceptRequiredCookies.cancel();
    handleOpenPrivacySettings.cancel();
  }, [handleAcceptAllCookies, handleAcceptRequiredCookies, handleOpenPrivacySettings]);
  if (!isCookieConsentModalVisible) {
    return null;
  }
  return /*#__PURE__*/_jsx(Modal, {
    classes: {
      content: styles.modalContent,
      layout: styles.modalLayout
    },
    children: /*#__PURE__*/_jsx(Grid, {
      component: "div",
      className: classNames(styles.container, 'cookie-consent-modal__container'),
      role: "alertdialog",
      "aria-modal": true,
      "aria-labelledby": "cookieConsentDialogTitle",
      "aria-describedby": "cookieConsentDialogMessage",
      children: /*#__PURE__*/_jsxs(Grid.Item, {
        component: "div",
        className: styles.item,
        children: [/*#__PURE__*/_jsx("img", {
          src: imageSRC,
          className: classNames(styles.image, 'cookie-consent-modal__image'),
          alt: "",
          "aria-hidden": "true"
        }), /*#__PURE__*/_jsx(I18n.Text, {
          className: classNames(styles.title, 'cookie-consent-modal__title'),
          string: modalTitle || 'cookieConsentModal.title',
          id: "cookieConsentDialogTitle"
        }), /*#__PURE__*/_jsx(I18n.Text, {
          string: modalMessage || 'cookieConsentModal.message',
          className: classNames('cookie-consent-modal__message'),
          acceptPlainTextWithPlaceholders: true,
          id: "cookieConsentDialogMessage",
          children: /*#__PURE__*/_jsx(I18n.Placeholder, {
            forKey: "privacyLink",
            children: /*#__PURE__*/_jsx(ConditionalWrapper, {
              condition: !!privacyPolicyLink,
              wrapper: children => /*#__PURE__*/_jsx(Link, {
                href: privacyPolicyLink,
                tag: "span",
                children: children
              }),
              children: /*#__PURE__*/_jsx(I18n.Text, {
                string: "cookieConsentModal.privacyText",
                className: styles.link
              })
            })
          })
        }), /*#__PURE__*/_jsxs(Grid.Item, {
          component: "div",
          className: styles.buttonWrapper,
          children: [/*#__PURE__*/_jsx(Button, {
            onClick: handleAcceptAllCookies,
            type: "primary",
            className: classNames(styles.button, 'cookie-consent-modal__button-accept-all'),
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
            })
          }), showRequiredCookiesButton ? /*#__PURE__*/_jsx(Button, {
            onClick: handleAcceptRequiredCookies,
            type: "simple",
            className: classNames(styles.button, 'cookie-consent-modal__button-accept-required'),
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
            })
          }) : null, /*#__PURE__*/_jsx(Button, {
            onClick: handleOpenPrivacySettings,
            type: "simple",
            className: classNames(styles.button, 'cookie-consent-modal__button-open-settings'),
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'
            })
          })]
        })]
      })
    })
  });
};
CookieConsentModal.defaultProps = {
  privacyPolicyLink: null
};
export default connect(CookieConsentModal);