@shopgate/engage/favorites/components/FavoriteButtonWide/FavoriteButtonWide.js

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { connect } from 'react-redux';
import { RippleButton } from '@shopgate/engage/components';
import { i18n } from '@shopgate/engage/core';
import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
import { makeIsProductOnFavoriteList, hasMultipleFavoritesList } from '@shopgate/pwa-common-commerce/favorites/selectors';
import { getWishlistItemQuantityEnabled } from '@shopgate/engage/core/selectors/shopSettings';
import appConfig from '@shopgate/pwa-common/helpers/config';

/**
 * @param {Object} state State.
 * @returns {Object}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const makeMapStateToProps = () => {
  const getIsOnList = makeIsProductOnFavoriteList((_, props) => props.productId);
  return (state, props) => ({
    isOnList: getIsOnList(state, props),
    hasMultipleLists: hasMultipleFavoritesList(state),
    wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state)
  });
};

/**
 * @param {Function} dispatch Dispatch
 * @returns {Object}
 * */
const mapDispatchToProps = dispatch => ({
  toggle: productId => dispatch(toggleFavoriteWithListChooser(productId))
});
const styles = {
  root: css({
    '&&': {
      margin: '0 0px 16px 16px',
      backgroundColor: '#fff',
      border: '1px solid var(--color-primary)',
      color: 'var(--color-high-emphasis)',
      borderRadius: 5,
      fontSize: 14,
      textTransform: 'none',
      padding: 0
    }
  }).toString(),
  ripple: css({
    padding: '8px 16px'
  }).toString()
};

/** @returns {JSX} */
const FavoriteButtonWide = ({
  productId,
  toggle,
  isOnList,
  hasMultipleLists,
  wishlistItemQuantityEnabled
}) => {
  const label = useMemo(() => {
    // When wishlist item quantity is active, items cannot be removed via the button
    if (!isOnList || wishlistItemQuantityEnabled) {
      return 'favorites.add_to_list';
    }
    if (hasMultipleLists) {
      return 'favorites.edit_lists';
    }
    return 'favorites.remove_from_list';
  }, [hasMultipleLists, isOnList, wishlistItemQuantityEnabled]);
  if (!appConfig.hasFavorites) {
    return null;
  }
  return /*#__PURE__*/_jsx(RippleButton, {
    className: styles.root,
    rippleClassName: styles.ripple,
    type: "primary",
    onClick: () => toggle(productId),
    children: i18n.text(label)
  });
};
export default connect(makeMapStateToProps, mapDispatchToProps)(FavoriteButtonWide);