maisonsport-common-ui/dist/commonjs/organisms/ConversationCard/index.js

Suite of styled-components to be consumed by the React-Native App and by the Web (via React-Native for Web)

"use strict";

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

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

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

var _Box = _interopRequireDefault(require("../../atoms/Box"));

var _Text = _interopRequireDefault(require("../../atoms/Text"));

var _Touchable = _interopRequireDefault(require("../../atoms/Touchable"));

var _Avatar = _interopRequireDefault(require("../../molecules/Avatar"));

var _dateTime = require("../../util/dateTime");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const colorsByStatus = {
  enquiry: 'primary',
  unpaid: 'orange',
  cancelled: 'red',
  confirmed: 'green'
};
const conversationCardTimeSentTestID = 'conversation-card-time-sent';
exports.conversationCardTimeSentTestID = conversationCardTimeSentTestID;

function ConversationCard({
  index,
  name,
  latestMessage,
  timeSent,
  totalUnread,
  bookingStatus,
  onPress,
  email,
  userAvatarUrl,
  t
}) {
  const isOdd = !!(index % 2);
  const moreThan100Messages = totalUnread >= 100;
  const sharedTextProps = {};
  const formattedTimeSent = timeSent ? (0, _dateTime.getFormattedTimeSent)(timeSent, t) : null;
  if (totalUnread) sharedTextProps.fontWeight = 'bold';
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Touchable.default, {
    width: 1,
    height: 110,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: isOdd ? 'convoPink' : 'convoGrey',
    borderRadius: 8,
    marginBottom: 3,
    padding: 3,
    onPress: onPress
  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
    name: name,
    email: email,
    url: userAvatarUrl
  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
    noWrapTheme: true,
    height: 1,
    flex: 1,
    paddingLeft: 3,
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    noWrapTheme: true,
    height: 1,
    maxWidth: "75%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  }, /*#__PURE__*/_react.default.createElement(_Text.default, _extends({
    noWrapTheme: true
  }, sharedTextProps, {
    fontSize: 2,
    marginRight: 2,
    numberOfLines: 1
  }), name), bookingStatus && /*#__PURE__*/_react.default.createElement(_Box.default, {
    noWrapTheme: true,
    width: "15px",
    height: "15px",
    borderRadius: "15px",
    backgroundColor: colorsByStatus[bookingStatus]
  })), /*#__PURE__*/_react.default.createElement(_Text.default, _extends({
    testID: conversationCardTimeSentTestID,
    noWrapTheme: true
  }, sharedTextProps, {
    marginLeft: 3
  }), formattedTimeSent)), /*#__PURE__*/_react.default.createElement(_Box.default, {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    flex: totalUnread ? 0.85 : 1
  }, /*#__PURE__*/_react.default.createElement(_Text.default, _extends({
    noWrapTheme: true
  }, sharedTextProps, {
    fontSize: 1,
    numberOfLines: 2
  }), latestMessage)), !!totalUnread && /*#__PURE__*/_react.default.createElement(_Box.default, {
    flex: 0.15,
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    noWrapTheme: true,
    width: "25px",
    height: "25px",
    borderRadius: "20px",
    backgroundColor: "dustyBlue",
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_Text.default, _extends({
    noWrapTheme: true
  }, sharedTextProps, {
    fontSize: moreThan100Messages ? '10px' : 0,
    color: "white",
    padding: 0
  }), moreThan100Messages ? '99+' : totalUnread)))))));
}

ConversationCard.defaultProps = {
  latestMessage: '',
  timeSent: null,
  totalUnread: 0,
  bookingStatus: null,
  onPress: () => {},
  email: '',
  userAvatarUrl: '',
  t: key => key
};
ConversationCard.propTypes = {
  index: _propTypes.default.number.isRequired,
  name: _propTypes.default.string.isRequired,
  latestMessage: _propTypes.default.string,
  timeSent: _propTypes.default.string,
  totalUnread: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  bookingStatus: _propTypes.default.string,
  onPress: _propTypes.default.func,
  email: _propTypes.default.string,
  userAvatarUrl: _propTypes.default.string,
  t: _propTypes.default.func
};
var _default = ConversationCard;
exports.default = _default;
//# sourceMappingURL=index.js.map