# All files / components/MessageBox MessageTimeBox.js

92.11% Statements 35/38
94.74% Branches 18/19
90.91% Functions 10/11
94.12% Lines 32/34

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120

    10x
    5x
    5x
    5x

    5x

    5x
    12x

    12x

    12x

    10x
    10x

    1x
    1x

    1x

    12x

    5x
    12x

    5x

    5x

    5x

    5x
    12x

    12x
    12x
    12x

    5x

    5x
    14x

    14x

    14x

    14x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';

    // Icons to be used on this component
    import { Icon } from 'react-icons-kit';
    import { ic_done_all as DoneAll } from 'react-icons-kit/md/ic_done_all';
    import { ic_access_time as AccessTime } from 'react-icons-kit/md/ic_access_time';
    import { ic_done as IcDone } from 'react-icons-kit/md/ic_done';
    import { ic_error_outline as IcErrorOutline } from 'react-icons-kit/md/ic_error_outline';

    // Constants
    import { transparentize } from 'polished';
    import constants from '../../utils/constants';
    import { formatDateTime } from '../../utils/datetime';
    import { componentStyle } from '../../utils/style';

    const MdDoneAll = (props) => <Icon icon={DoneAll} {...props} />;
    const MdAccessTime = (props) => <Icon icon={AccessTime} {...props} />;
    const MdDone = (props) => <Icon icon={IcDone} {...props} />;
    const MdErrorOutline = (props) => <Icon icon={IcErrorOutline} {...props} />;

    const { messagesTypes, personTypes } = constants;

    const messageTextColor = (props) => {
      const { message, theme } = props;

      let messageBoxVariant = 'Agent';

      switch (message.person.type) {
        case personTypes.CLIENT:
          messageBoxVariant = 'Visitor';
          break;
        case personTypes.AGENT:
          messageBoxVariant = 'Agent';
          break;
        case personTypes.BOT:
          messageBoxVariant = 'Bot';
          break;
        default:
          break;
      }

      return transparentize(0.4, componentStyle(theme, `messageBox${messageBoxVariant}`, 'color'));
    };

    const StyledTimeAgoText = styled.span`
      font-size: ${(props) => props.theme.typography.classes.small.fontSize};
    `;
    StyledTimeAgoText.displayName = 'StyledTimeAgoText';

    const StyledStatusSpan = styled.span`
      margin-left: 3px;
    `;
    StyledStatusSpan.displayName = 'StyledStatusSpan';

    const StyledMessageTimeBoxContainer = styled.span`
      color: ${(props) => messageTextColor(props)};
      display: inline-block;
      float: right;
      padding: 0 0 0 7px;
      position: relative;
      bottom: -4px;
      max-width: 80px;
      text-align: right;
      font-size: ${(props) => props.theme.typography.classes.caption.fontSize};
      line-height: ${(props) => props.theme.typography.classes.caption.lineHeight};
      font-weight: ${(props) => props.theme.typography.weights.fontWeightMedium};
    `;
    StyledMessageTimeBoxContainer.displayName = 'StyledMessageTimeBoxContainer';

    const MessageTimeBox = (props) => {
      const { message } = props;
      const {
        date, dateFormat, status, type,
      } = message;

      const dateToShow = formatDateTime(new Date(date), dateFormat);

      return (
        <StyledMessageTimeBoxContainer message={message} personTypes={personTypes}>
          {
            date && (type !== messagesTypes.TYPING)
          && (
            <StyledTimeAgoText>
              {dateToShow}
            </StyledTimeAgoText>
          )
          }
          {
            status
            && (
              <StyledStatusSpan>
                {
                  status === 'waiting' && <MdAccessTime />
                }
                {
                  status === 'sent' && <MdDone />
                }
                {
                  status === 'received' && <MdDoneAll />
                }
                {
                  status === 'read' && <MdDoneAll color="#4FC3F7" />
                }
                {
                  status === 'failed' && <MdErrorOutline />
                }
              </StyledStatusSpan>
            )
          }
        </StyledMessageTimeBoxContainer>);
    };

    MessageTimeBox.propTypes = {
      message: PropTypes.object.isRequired,
    };

    export default MessageTimeBox;