@shopgate/engage/development/components/DevelopmentSettings/DevelopmentSettings.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector, useDispatch } from 'react-redux';
import { SheetDrawer, RippleButton } from '@shopgate/engage/components';
import { makeStyles } from '@shopgate/engage/styles';
import { getEnabledCMSVersion, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
import { getIsCMS2PreviewEnabled } from "../../selectors";
import { toggleCms2Preview } from "../../action-creators";
import { jsx as _jsx } from "react/jsx-runtime";
const useStyles = makeStyles()(theme => ({
  container: {
    padding: theme.spacing(2, 2, 4),
    display: 'flex',
    justifyContent: 'center'
  },
  button: {
    fontWeight: 'normal'
  }
}));

/**
 * Development settings component.
 * @param {Object} props The component props.
 * @param {boolean} props.isOpen Whether the drawer is open.
 * @param {Function} props.onClose The function to call when the drawer should be closed.
 * @returns {JSX.Element}
 */
const DevelopmentSettings = ({
  isOpen,
  onClose
}) => {
  const {
    classes
  } = useStyles();
  const dispatch = useDispatch();
  const enabledCMSVersion = useSelector(getEnabledCMSVersion);
  const enableCms2ForAllShoppers = useSelector(getEnableCms2ForAllShoppers);
  const isCMS2PreviewEnabled = useSelector(getIsCMS2PreviewEnabled);

  // No need to show the preview toggle if CMS 2.0 is not available for the merchant or if it's
  // already enabled for all shoppers.
  if (enableCms2ForAllShoppers || enabledCMSVersion === 'v1') {
    return null;
  }
  return /*#__PURE__*/_jsx(SheetDrawer, {
    title: " ",
    isOpen: isOpen,
    onClose: onClose,
    children: /*#__PURE__*/_jsx("div", {
      className: classes.container,
      children: /*#__PURE__*/_jsx(RippleButton, {
        className: classes.button,
        type: "simple",
        onClick: () => {
          onClose();
          setTimeout(() => {
            dispatch(toggleCms2Preview(!isCMS2PreviewEnabled));
          }, 300);
        },
        children: `${isCMS2PreviewEnabled ? 'Disable' : 'Enable'} CMS 2.0 Preview`
      })
    })
  });
};
export default DevelopmentSettings;