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

Shopgate's ENGAGE library.

import React, { useCallback, useState } from 'react';
import { Button, Grid, I18n, Link, Switch, ConditionalWrapper } from '@shopgate/engage/components';
import PropTypes from 'prop-types';
import { appConfig } from '@shopgate/engage';
import { i18n } from '@shopgate/engage/core';
import classNames from 'classnames';
import styles from "./style";
import connect from "./connector";

/**
 * The PrivacySettings component.
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PrivacySettings = ({
  acceptAllCookies,
  acceptSelectedCookies,
  comfortCookiesAcceptedState,
  statisticsCookiesAcceptedState,
  privacyPolicyLink
}) => {
  const {
    cookieConsent: {
      settingsComfortText,
      settingsComfortTitle,
      settingsStatisticsText,
      settingsStatisticsTitle,
      settingsRequiredText,
      settingsRequiredTitle,
      showComfortCookiesToggle
    } = {}
  } = appConfig;
  const [areComfortCookiesSelected, setAreComfortCookiesSelected] = useState(comfortCookiesAcceptedState !== null ? comfortCookiesAcceptedState : false);
  const [areStatisticsCookiesSelected, setAreStatisticsCookiesSelected] = useState(statisticsCookiesAcceptedState !== null ? statisticsCookiesAcceptedState : false);
  const handleChangeComfortCookies = useCallback(() => {
    setAreComfortCookiesSelected(!areComfortCookiesSelected);
  }, [areComfortCookiesSelected]);
  const handleChangeStatisticsCookies = useCallback(() => {
    setAreStatisticsCookiesSelected(!areStatisticsCookiesSelected);
  }, [areStatisticsCookiesSelected]);
  const handleAcceptAllCookies = useCallback(() => {
    setAreStatisticsCookiesSelected(true);
    setAreComfortCookiesSelected(true);
    acceptAllCookies();
  }, [acceptAllCookies]);
  return /*#__PURE__*/_jsxs(Grid, {
    component: "div",
    className: styles.container,
    children: [/*#__PURE__*/_jsxs(Grid.Item, {
      component: "div",
      className: styles.item,
      children: [showComfortCookiesToggle ? /*#__PURE__*/_jsx(Grid.Item, {
        component: "div",
        className: styles.switchWrapper,
        children: /*#__PURE__*/_jsxs(Switch, {
          onChange: handleChangeComfortCookies,
          checked: areComfortCookiesSelected,
          a11yFallbackText: `${i18n.text(settingsComfortTitle || 'cookieSettings.comfortTitle')}. ${i18n.text(settingsComfortText || 'cookieSettings.comfort')}`,
          children: [/*#__PURE__*/_jsx("span", {
            className: styles.title,
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: settingsComfortTitle || 'cookieSettings.comfortTitle'
            })
          }), /*#__PURE__*/_jsx("span", {
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: settingsComfortText || 'cookieSettings.comfort'
            })
          })]
        })
      }) : null, /*#__PURE__*/_jsx(Grid.Item, {
        component: "div",
        className: styles.switchWrapper,
        children: /*#__PURE__*/_jsxs(Switch, {
          onChange: handleChangeStatisticsCookies,
          checked: areStatisticsCookiesSelected,
          a11yFallbackText: `${i18n.text(settingsStatisticsTitle || 'cookieSettings.statisticsTitle')}. ${i18n.text(settingsStatisticsText || 'cookieSettings.statistics')}`,
          children: [/*#__PURE__*/_jsx("span", {
            className: styles.title,
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: settingsStatisticsTitle || 'cookieSettings.statisticsTitle'
            })
          }), /*#__PURE__*/_jsx("span", {
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: settingsStatisticsText || 'cookieSettings.statistics'
            })
          })]
        })
      }), /*#__PURE__*/_jsx(Grid.Item, {
        component: "div",
        className: styles.switchWrapper,
        children: /*#__PURE__*/_jsxs(Switch, {
          disabled: true,
          checked: true,
          a11yFallbackText: `${i18n.text(settingsRequiredTitle || 'cookieSettings.requiredTitle')}. ${i18n.text(settingsRequiredText || 'cookieSettings.required')}`,
          children: [/*#__PURE__*/_jsx("span", {
            className: styles.title,
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: settingsRequiredTitle || 'cookieSettings.requiredTitle'
            })
          }), /*#__PURE__*/_jsx("span", {
            children: /*#__PURE__*/_jsx(I18n.Text, {
              string: settingsRequiredText || 'cookieSettings.required'
            })
          })]
        })
      })]
    }), /*#__PURE__*/_jsxs(Grid.Item, {
      component: "div",
      className: styles.buttonWrapper,
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: () => handleAcceptAllCookies(),
        type: "primary",
        className: classNames(styles.button, 'privacy-settings__button-accept-all'),
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "cookieConsentModal.buttonAcceptAll"
        })
      }), /*#__PURE__*/_jsx(Button, {
        onClick: () => acceptSelectedCookies({
          comfortCookiesAccepted: areComfortCookiesSelected,
          statisticsCookiesAccepted: areStatisticsCookiesSelected
        }),
        type: "simple",
        className: classNames(styles.button, 'privacy-settings__button-accept-selected'),
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "cookieConsentModal.modalButtonConfirmSelected"
        })
      })]
    }), /*#__PURE__*/_jsx(Grid.Item, {
      component: "div",
      children: /*#__PURE__*/_jsx(I18n.Text, {
        string: "cookieSettings.privacy",
        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
            })
          })
        })
      })
    })]
  });
};
PrivacySettings.defaultProps = {
  comfortCookiesAcceptedState: null,
  statisticsCookiesAcceptedState: null,
  privacyPolicyLink: null
};
export default connect(PrivacySettings);