@shopgate/engage/favorites/components/ListChooser/ListChooserItem.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { css } from 'glamor';
import { makeIsProductOnSpecificFavoriteList } from '@shopgate/pwa-common-commerce/favorites/selectors';
import { i18n } from '@shopgate/engage/core';
import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";

/**
 * @returns {Object}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const makeMapStateToProps = () => {
  const getIsOnList = makeIsProductOnSpecificFavoriteList((_, props) => props.productId, (_, props) => props.listId);
  return (state, props) => ({
    isOnList: getIsOnList(state, props),
    wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state)
  });
};
const styles = {
  remove: css({
    color: 'var(--color-state-alert)'
  }).toString(),
  add: css({
    color: 'var(--color-state-ok)',
    whiteSpace: 'noWrap'
  }).toString()
};

/**
 * @param {Object} props Props.
 * @returns {JSX.Element}
 */
const ListChooserItem = ({
  isOnList,
  wishlistItemQuantityEnabled
}) => {
  if (wishlistItemQuantityEnabled && isOnList) {
    return /*#__PURE__*/_jsx("span", {
      className: styles.add,
      children: i18n.text('favorites.list_chooser.add_more')
    });
  }
  if (isOnList) {
    return /*#__PURE__*/_jsx("span", {
      className: styles.remove,
      children: i18n.text('favorites.list_chooser.remove')
    });
  }
  return /*#__PURE__*/_jsx("span", {
    className: styles.add,
    children: i18n.text('favorites.list_chooser.add')
  });
};
export default connect(makeMapStateToProps)(ListChooserItem);