Feature/show mms picture

packages/ringcentral-integration/lib/messageHelper/index.js

@@ -182,6 +182,22 @@ export function getFaxAttachment(message, accessToken) {
     uri
   };
 }
+export function getMMSAttachment(message, accessToken) {
+  if (!message.attachments || message.attachments.length === 0) {
+    return null;
+  }
+  const attachment = message.attachments.find(
+    a => a.type === 'MmsAttachment'
+  );
+  if (!attachment) {
+    return null;
+  }
+  const uri = `${attachment.uri}?access_token=${decodeURIComponent(accessToken)}`;
+  return {
+    ...attachment,
+    uri
+  };
+}
 
 export function getConversationId(record) {
   const conversationId = (record.conversation && record.conversation.id) || record.id;

packages/ringcentral-integration/modules/Conversations/index.js

@@ -7,6 +7,7 @@ import ensureExist from '../../lib/ensureExist';
 import proxify from '../../lib/proxy/proxify';
 import messageTypes from '../../enums/messageTypes';
 import cleanNumber from '../../lib/cleanNumber';
+import isBlank from '../../lib/isBlank';
 import messageSenderMessages from '../MessageSender/messageSenderMessages';
 
 import {
@@ -16,6 +17,7 @@ import {
   messageIsVoicemail,
   getVoicemailAttachment,
   getFaxAttachment,
+  getMMSAttachment,
   messageIsFax,
   getMyNumberFromMessage,
   getRecipientNumbersFromMessage,
@@ -68,6 +70,7 @@ export default class Conversations extends RcModule {
     perPage = DEFAULT_PER_PAGE,
     daySpan = DEFAULT_DAY_SPAN,
     enableLoadOldMessages = false, // disable old message by default
+    showMMSAttachment = false,
     ...options
   }) {
     super({
@@ -94,6 +97,7 @@ export default class Conversations extends RcModule {
     this._olderDataExsited = true;
     this._olderMessagesExsited = true;
     this._enableLoadOldMessages = enableLoadOldMessages;
+    this._showMMSAttachment = showMMSAttachment;
 
     if (this._contactMatcher) {
       this._contactMatcher.addQuerySource({
@@ -607,6 +611,10 @@ export default class Conversations extends RcModule {
         if (typeof unreadCounts === 'undefined') {
           unreadCounts = messageIsUnread(message) ? 1 : 0;
         }
+        let mmsAttachment = null;
+        if (messageIsTextMessage(message) && isBlank(message.subject) && this._showMMSAttachment) {
+          mmsAttachment = getMMSAttachment(message);
+        }
         return {
           ...message,
           unreadCounts,
@@ -619,6 +627,7 @@ export default class Conversations extends RcModule {
           conversationMatches,
           voicemailAttachment,
           faxAttachment,
+          mmsAttachment,
           lastMatchedCorrespondentEntity: (
             this._conversationLogger &&
               this._conversationLogger.getLastMatchedCorrespondentEntity(message)
@@ -728,15 +737,25 @@ export default class Conversations extends RcModule {
     () => this.oldMessages,
     () => this._messageStore.conversationStore,
     () => this.formatedConversations,
-    (conversationId, oldMessages, conversationStore, conversations) => {
+    () => this._auth.accessToken,
+    (conversationId, oldMessages, conversationStore, conversations, accessToken) => {
       const conversation = conversations.find(
         c => c.conversationId === conversationId
       );
       const messages = [].concat(conversationStore[conversationId] || []);
       const currentConversation = {
         ...conversation
       };
-      const allMessages = messages.concat(oldMessages).slice();
+      const allMessages = (messages.concat(oldMessages)).map((m) => {
+        if (!this._showMMSAttachment) {
+          return m;
+        }
+        const mmsAttachment = getMMSAttachment(m, accessToken);
+        return {
+          ...m,
+          mmsAttachment,
+        };
+      });
       currentConversation.messages = allMessages.reverse();
       currentConversation.senderNumber = getMyNumberFromMessage({
         message: conversation,

packages/ringcentral-widgets-demo/dev-server/Phone.js

@@ -159,6 +159,7 @@ import LocalForageStorage from 'ringcentral-integration/lib/LocalForageStorage';
       provide: 'ConversationsOptions',
       useValue: {
         enableLoadOldMessages: true,
+        showMMSAttachment: true,
       },
       spread: true
     },

packages/ringcentral-widgets/components/ConversationMessageList/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import isBlank from 'ringcentral-integration/lib/isBlank';
 
 import styles from './styles.scss';
 
@@ -10,7 +11,14 @@ export function Message({
   direction,
   sender,
   subjectRenderer: SubjectRenderer,
+  mmsAttachment,
 }) {
+  let content;
+  if (subject && !isBlank(subject)) {
+    content = SubjectRenderer ? <SubjectRenderer subject={subject} /> : subject;
+  } else if (mmsAttachment && mmsAttachment.contentType.indexOf('image') > -1) {
+    content = (<img src={mmsAttachment.uri} alt="attactment" className={styles.picture} />);
+  }
   return (
     <div className={styles.message}>
       {
@@ -37,9 +45,7 @@ export function Message({
           direction === 'Outbound' ? styles.outbound : styles.inbound,
           (subject && subject.length > 500) && styles.big,
         )}>
-        {
-          SubjectRenderer ? <SubjectRenderer subject={subject} /> : subject
-        }
+        { content }
       </div>
       <div className={styles.clear} />
     </div>
@@ -52,13 +58,15 @@ Message.propTypes = {
   time: PropTypes.string,
   sender: PropTypes.string,
   subjectRenderer: PropTypes.func,
+  mmsAttachment: PropTypes.object,
 };
 
 Message.defaultProps = {
   subject: '',
   sender: undefined,
   time: undefined,
   subjectRenderer: undefined,
+  mmsAttachment: null,
 };
 
 class ConversationMessageList extends Component {
@@ -145,6 +153,7 @@ class ConversationMessageList extends Component {
           direction={message.direction}
           subject={message.subject}
           subjectRenderer={messageSubjectRenderer}
+          mmsAttachment={message.mmsAttachment}
         />
       );
     });
@@ -173,6 +182,7 @@ ConversationMessageList.propTypes = {
     id: PropTypes.number,
     direction: PropTypes.string,
     subject: PropTypes.string,
+    mmsAttachment: PropTypes.object,
   })).isRequired,
   className: PropTypes.string,
   showSender: PropTypes.bool,

packages/ringcentral-widgets/components/ConversationMessageList/styles.scss

@@ -64,29 +64,29 @@
   background: #efefef;
 
   &:before {
-    z-index: -1;
+    z-index: 0;
     position: absolute;
     content: "";
-    width: 33px;
-    height: 28px;
+    width: 25px;
+    height: 25px;
     bottom: 0px;
     left: -10px;
     background: #efefef;
     border-bottom-right-radius: 33px;
-    transform: rotate(-8deg);
+    transform: rotate(-3deg);
   }
 
   &:after {
-    z-index: -1;
+    z-index: 0;
     position: absolute;
     content: "";
     width: 30px;
     height: 30px;
     bottom: -1px;
-    left: -21px;
+    left: -24px;
     background: #fff;
     border-bottom-right-radius: 30px;
-    transform: rotate(-27deg);
+    transform: rotate(-24deg);
   }
 }
 
@@ -95,29 +95,29 @@
   clear: both;
   border-bottom-right-radius: 10px;
   &:before {
-    z-index: -1;
+    z-index: 0;
     position: absolute;
     content: "";
-    width: 29px;
-    height: 28px;
+    width: 25px;
+    height: 25px;
     bottom: -2px;
-    right: -8px;
+    right: -11px;
     background: $sms-bubble-background-color;
     border-bottom-left-radius: 33px;
     transform: rotate(-6deg);
   }
 
   &:after {
-    z-index: -1;
+    z-index: 0;
     position: absolute;
     content: "";
     width: 30px;
     height: 30px;
     bottom: 3px;
-    right: -21px;
+    right: -23px;
     background: #fff;
     border-bottom-left-radius: 30px;
-    transform: rotate(41deg);
+    transform: rotate(43deg);
   }
 }
 
@@ -140,3 +140,7 @@
   line-height: 40px;
   font-size: 14px;
 }
+
+.picture {
+  width: 100%;
+}

packages/ringcentral-widgets/components/MessageItem/i18n/en-US.js

@@ -18,5 +18,6 @@ export default {
   faxReceived: 'Fax received',
   pages: 'pages',
   preview: 'View',
-  download: 'Download'
+  download: 'Download',
+  imageAttachment: 'Attachment: 1 image',
 };

packages/ringcentral-widgets/components/MessageItem/index.js

@@ -312,6 +312,9 @@ export default class MessageItem extends Component {
       currentLocale,
     } = this.props;
     if (messageIsTextMessage(conversation)) {
+      if (conversation.mmsAttachment && conversation.mmsAttachment.contentType.indexOf('image') > -1) {
+        return i18n.getString('imageAttachment', currentLocale);
+      }
       return conversation.subject;
     }
     if (conversation.voicemailAttachment) {