@shopgate/engage/favorites/components/Item/ItemNotes.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { connect } from 'react-redux';
import { i18n } from '@shopgate/engage/core';
import { getWishlistItemNotesEnabled } from "../../../core/selectors/shopSettings";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const styles = {
  root: css({
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center'
  }),
  addCommentButton: css({
    fontSize: 17,
    color: 'var(--color-secondary)',
    fontWeight: 500,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    paddingLeft: 0,
    paddingRight: 0,
    textAlign: 'left'
  }),
  comment: css({
    fontSize: 17,
    color: 'var(--color-text-high-emphasis)',
    fontWeight: 500,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  }),
  notes: css({
    paddingRight: 4,
    fontStyle: 'italic'
  }),
  buttons: css({
    whiteSpace: 'nowrap'
  })
};

/**
 * @return {Function} The extended component props.
 */
const makeMapStateToProps = () => state => ({
  wishlistItemNotesEnabled: getWishlistItemNotesEnabled(state)
});

/**
 *
 * @param {Object} props The component props
 * @returns {JSX}
 */
const ItemNotes = ({
  wishlistItemNotesEnabled,
  notes,
  onClickOpenComment,
  onClickDeleteComment,
  notesButtonRef
}) => {
  if (!wishlistItemNotesEnabled) {
    return null;
  }
  /* eslint-disable jsx-a11y/aria-role */
  return /*#__PURE__*/_jsxs("div", {
    className: styles.root,
    children: [notes && /*#__PURE__*/_jsxs("span", {
      role: "text",
      children: [/*#__PURE__*/_jsx("span", {
        className: styles.comment,
        children: `${i18n.text('favorites.comments.notes')}: `
      }), /*#__PURE__*/_jsx("span", {
        className: styles.notes,
        children: `"${notes}"`
      })]
    }), /*#__PURE__*/_jsxs("span", {
      className: styles.buttons,
      children: [/*#__PURE__*/_jsx("button", {
        type: "button",
        onClick: onClickOpenComment,
        className: styles.addCommentButton,
        ref: notesButtonRef,
        children: notes ? i18n.text('favorites.comments.edit') : i18n.text('favorites.comments.add')
      }), notes && /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("span", {
          "aria-hidden": true,
          children: " | "
        }), /*#__PURE__*/_jsx("button", {
          type: "button",
          onClick: onClickDeleteComment,
          className: styles.addCommentButton,
          children: i18n.text('favorites.comments.delete')
        })]
      })]
    })]
  });
  /* eslint-enable jsx-a11y/aria-role */
};
ItemNotes.defaultProps = {
  notes: null,
  notesButtonRef: null
};
export default connect(makeMapStateToProps)(ItemNotes);