@tractorzoom/equipment-card/lib/equipment-card.js

Equipment Details Card

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _equipmentAttributes = require("@tractorzoom/equipment-attributes");

var _AddRounded = _interopRequireDefault(require("@material-ui/icons/AddRounded"));

var _core = require("@material-ui/core");

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

var _CardActionArea = _interopRequireDefault(require("@material-ui/core/CardActionArea"));

var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));

var _CardMedia = _interopRequireDefault(require("@material-ui/core/CardMedia"));

var _CheckRounded = _interopRequireDefault(require("@material-ui/icons/CheckRounded"));

var _luxon = require("luxon");

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _equipmentCardSkeleton = _interopRequireDefault(require("./equipment-card-skeleton"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _lozenge = _interopRequireDefault(require("@tractorzoom/lozenge"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _clsx = _interopRequireDefault(require("clsx"));

var _reactIntersectionObserver = require("react-intersection-observer");

var _styles = _interopRequireDefault(require("./styles"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const getAttrText = (attr, props) => {
  const attrName = attr.name;

  if (attrName === 'width' && (props['widthFeet'] || props['widthInches'])) {
    const ft = props['widthFeet'];
    const inches = props['widthInches'];

    if (ft && inches) {
      return `${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(ft)}' ${inches}"`;
    }

    if (ft) {
      return `${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(ft)} ft`;
    }

    return `${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(inches)} in`;
  }

  if (attrName === 'capacity' && (props['ton'] || props['gallon'])) {
    const ton = props['ton'];
    const gallon = props['gallon'];

    if (ton) {
      return `${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(ton)} T`;
    }

    return `${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(gallon)} Gal`;
  }

  if (props[attrName]) {
    return (0, _equipmentAttributes.formatNumberWithThousandSeparator)(props[attr.name]) + ' ' + (attr === null || attr === void 0 ? void 0 : attr.shortName);
  }

  return '';
};

const EquipmentCard = props => {
  const canvasRef = (0, _react.useRef)(null);
  const classes = (0, _styles.default)();

  const getImageUrl = url => {
    if (url) {
      if (url.indexOf('http') >= 0) {
        return url.replace('tz-prod.s3.amazonaws.com', 's3.tractorzoom.com');
      }

      return `https://s3.tractorzoom.com/${url}`;
    }

    return '';
  };

  const defaultImageUrl = props.imageUrl ? getImageUrl(props.imageUrl) : props.makeImageUrl ? getImageUrl(props.makeImageUrl) : '/img/nopicture.png';
  const [imageUrl, setImageUrl] = (0, _react.useState)(defaultImageUrl);
  const isSold = props.price > 0;
  const isDealer = props.sellerType === 'dealer';
  const saleDate = props.saleDate ? props.saleDate : props.auctionDate;

  const formattedDate = _luxon.DateTime.fromISO(saleDate).toLocaleString();

  const auctionDate = _luxon.DateTime.fromISO(saleDate);

  const formattedAuctionDate = auctionDate.toFormat('MMM d');
  const formattedPrice = `$${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(`${props.price}`)}`;
  const formattedListPrice = `$${(0, _equipmentAttributes.formatNumberWithThousandSeparator)(`${props.listPrice}`)}`;
  const isSelected = props.selectedEquipmentSet && props.selectedEquipmentSet.has(props.id);
  const {
    ref,
    inView
  } = (0, _reactIntersectionObserver.useInView)({
    threshold: 0.7
  });
  const cardTitleText = `${props.year ? `${props.year} ` : ''}${props.make} ${props.model}`;
  const [hasBeenSeen, setHasBeenSeen] = (0, _react.useState)(false);
  let styles = props.style;
  (0, _react.useEffect)(() => {
    if (props.onVisible && inView && !hasBeenSeen) {
      setHasBeenSeen(true);
      props.onVisible(inView);
    }
  }, [props.onVisible, inView, hasBeenSeen]);

  if (props.isLoading) {
    return /*#__PURE__*/_react.default.createElement(_equipmentCardSkeleton.default, props);
  }

  const attr = (0, _equipmentAttributes.getTopAttributesForCategoryAndSubCategory)(props.category, props.subcategory);

  if (!props.handleOpen) {
    styles = { ...styles,
      pointerEvents: 'none'
    };
  }

  const handleToggleSelected = event => {
    props.handleEquipmentSelected();
    event.stopPropagation();
  };

  const attributeArray = attr.map(attribute => getAttrText(attribute, props)).filter(attr => !!attr);

  const imageError = e => {
    e.target.onerror = null;

    if (imageUrl === getImageUrl(props.makeImageUrl) || !props.makeImageUrl) {
      setImageUrl('https://s3.tractorzoom.com/img/nopicture.png');
    } else {
      setImageUrl(getImageUrl(props.makeImageUrl));
    }
  };

  const imageAltText = `${cardTitleText} Equipment Image`;

  const NextImage = () => /*#__PURE__*/_react.default.createElement(props.imageComponent, {
    alt: imageAltText,
    height: 233,
    objectFit: "cover",
    onError: imageError,
    src: imageUrl,
    width: 350
  });

  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.cardHolder
  }, /*#__PURE__*/_react.default.createElement("canvas", {
    className: classes.canvas,
    ref: canvasRef
  }), /*#__PURE__*/_react.default.createElement(_Card.default, {
    className: (0, _clsx.default)(classes.root, {
      [classes.selectedCard]: isSelected
    }),
    "data-cy": "equipment-card",
    "data-guid": props.id,
    ref: ref,
    style: styles,
    variant: "outlined"
  }, /*#__PURE__*/_react.default.createElement(_CardActionArea.default, {
    "data-tour": props.shouldHaveDataTour ? 'equipment-card-action-area' : '',
    onClick: props.handleOpen
  }, /*#__PURE__*/_react.default.createElement(_CardMedia.default, {
    alt: imageAltText,
    className: classes.media,
    component: props.imageComponent ? NextImage : 'img',
    "data-cy": "equipment-card-image",
    onError: imageError,
    src: imageUrl,
    title: "Equipment Image"
  }), /*#__PURE__*/_react.default.createElement(_CardContent.default, {
    classes: {
      root: classes.cardContent
    }
  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
    alignItems: "center",
    display: "flex",
    justifyContent: "space-between",
    style: {
      marginBottom: 4
    }
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.makeModelTitle,
    component: "span",
    "data-cy": "equipment-card-make-model",
    variant: "h5"
  }, cardTitleText), props.sellerType && /*#__PURE__*/_react.default.createElement(_lozenge.default, {
    backgroundColor: isDealer ? '#DAE7FE' : '#DFFCED',
    color: isDealer ? '#183A99' : '#045C3E',
    style: {
      margin: 4
    }
  }, isDealer ? 'DEALER' : 'AUCTION')), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.details
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-cy": "equipment-card-variable-detail"
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.primaryDetail
  }, attributeArray.length > 0 ? attributeArray[0] : '---')), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: isDealer ? classes.listPrice : classes.price,
    "data-cy": "equipment-card-price"
  }, isSold ? formattedPrice : isDealer ? formattedListPrice : formattedAuctionDate)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.secondaryDetail,
    style: {
      marginBottom: 10
    }
  }, attributeArray.length > 1 ? attributeArray[1] : '\u00a0'), /*#__PURE__*/_react.default.createElement(_Divider.default, {
    className: classes.divider
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.locationAndSaleDate
  }, isSold ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.auctionDetailsText
  }, (0, _equipmentAttributes.getLocation)(props, true)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.auctionDetailsText,
    style: {
      color: '#0E1C3699'
    }
  }, "Sold ", formattedDate)) : /*#__PURE__*/_react.default.createElement(_core.Box, {
    display: "flex",
    flexDirection: "column"
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.auctionDetailsText
  }, props.auctioneer), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    className: classes.auctionDetailsText,
    style: {
      color: '#0E1C3699'
    }
  }, (0, _equipmentAttributes.getLocation)(props, true)))))), !!props.handleEquipmentSelected && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    "aria-label": "select equipment",
    className: isSelected ? classes.checkedButton : classes.selectButton,
    color: "primary",
    "data-cy": "equipment-card-toggle-selection-button",
    "data-tour": props.shouldHaveDataTour ? 'equipment-card-select-equipment' : '',
    onClick: handleToggleSelected,
    title: isSelected ? 'Remove from custom average' : 'Add to custom average'
  }, isSelected ? /*#__PURE__*/_react.default.createElement(_CheckRounded.default, {
    fontSize: "large"
  }) : /*#__PURE__*/_react.default.createElement(_AddRounded.default, {
    fontSize: "large"
  }))));
};

EquipmentCard.defaultProps = {
  auctionDate: '',
  distance: null,
  imageUrl: '',
  saleDate: '',
  shouldHaveDataTour: false,
  year: null
};
EquipmentCard.propTypes = {
  auctionDate: _propTypes.default.string,
  auctioneer: _propTypes.default.string,
  category: _propTypes.default.string,
  distance: _propTypes.default.number,
  handleEquipmentSelected: _propTypes.default.func,
  handleOpen: _propTypes.default.func,
  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  imageComponent: _propTypes.default.func,
  imageUrl: _propTypes.default.string,
  isLoading: _propTypes.default.bool,
  listPrice: _propTypes.default.string,
  make: _propTypes.default.string,
  makeImageUrl: _propTypes.default.string,
  model: _propTypes.default.string,
  onVisible: _propTypes.default.func,
  price: _propTypes.default.number,
  saleDate: _propTypes.default.string,
  selectedEquipmentSet: _propTypes.default.object,
  sellerType: _propTypes.default.number,
  shouldHaveDataTour: _propTypes.default.bool,
  state: _propTypes.default.string,
  style: _propTypes.default.object,
  subcategory: _propTypes.default.string,
  year: _propTypes.default.number
};
var _default = EquipmentCard;
exports.default = _default;