adjust compose text ui and redirect url

package.json

@@ -31,7 +31,7 @@
     "react-router": "^3.0.0",
     "ringcentral": "3.0.0",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.4.1",
+    "ringcentral-integration": "^0.4.3",
     "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
@@ -79,7 +79,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "3.0.0",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.4.1",
+    "ringcentral-integration": "^0.4.3",
     "sass-loader": "^4.1.1",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.1",

src/components/ComposeTextPanel/i18n/en-US.js

@@ -1,7 +1,7 @@
 export default {
-  sendMessageFrom: 'Send Message From',
+  from: 'From',
   to: 'To',
-  enterNameOrNumber: 'Enter Number Or Name',
-  typeAnyToSend: 'Type any text to send',
+  enterNameOrNumber: 'Enter Number or Name...',
+  typeMessage: 'Type message...',
   send: 'Send',
 };

src/components/ComposeTextPanel/index.js

@@ -2,35 +2,7 @@ import React, { PropTypes, Component } from 'react';
 import i18n from './i18n';
 import styles from './styles.scss';
 import RecipientsInput from '../RecipientsInput';
-
-function SenderSelectInput(props) {
-  return (
-    <select
-      className={props.className}
-      value={props.value}
-      onChange={props.onChange}>
-      {
-        props.options.map(number => (
-          <option key={number} value={number}>
-            {props.formatPhone(number)}
-          </option>
-        ))
-      }
-    </select>
-  );
-}
-
-SenderSelectInput.propTypes = {
-  value: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  formatPhone: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-};
-
-SenderSelectInput.defaultProps = {
-  className: null,
-};
+import Select from '../Select';
 
 class ComposeTextPanel extends Component {
   constructor(props) {
@@ -53,6 +25,9 @@ class ComposeTextPanel extends Component {
     this.onReceiverInputKeyDown = (e) => {
       if (e.key === ',' || e.key === ';' || e.key === 'Enter') {
         e.preventDefault();
+        if (this.props.typingToNumber.length === 0) {
+          return;
+        }
         this.props.addToNumber({
           name: this.props.formatPhone(this.props.typingToNumber),
           phoneNumber: this.props.typingToNumber,
@@ -88,21 +63,9 @@ class ComposeTextPanel extends Component {
 
   render() {
     return (
-      <div>
+      <div className={styles.root}>
         <form onSubmit={this.handleSubmit}>
-          <div className={styles.messageSenderField}>
-            <label>{i18n.getString('sendMessageFrom', this.props.currentLocale)}</label>
-            <div className={styles.valueInput}>
-              <SenderSelectInput
-                className={styles.select}
-                value={this.props.senderNumber}
-                onChange={this.onSenderChange}
-                options={this.props.senderNumbers}
-                formatPhone={this.props.formatPhone}
-              />
-            </div>
-          </div>
-          <div className={styles.messageReceiverField}>
+          <div className={styles.receiverField}>
             <label>{i18n.getString('to', this.props.currentLocale)}:</label>
             <div className={styles.rightPanel}>
               <RecipientsInput
@@ -120,20 +83,38 @@ class ComposeTextPanel extends Component {
               />
             </div>
           </div>
-          <div className={styles.messageTextField}>
-            <textarea
-              placeholder={i18n.getString('typeAnyToSend', this.props.currentLocale)}
-              value={this.props.messageText}
-              maxLength="1000"
-              onChange={this.onTextChange}
-            />
+          <div className={styles.senderField}>
+            <label>{i18n.getString('from', this.props.currentLocale)}:</label>
+            <div className={styles.senderInput}>
+              <Select
+                className={styles.senderSelect}
+                value={this.props.senderNumber}
+                onChange={this.onSenderChange}
+                options={this.props.senderNumbers}
+                paddingLeft={0}
+                valueFunction={option => option}
+                renderFunction={this.props.formatPhone}
+              />
+            </div>
+          </div>
+          <div className={styles.buttomField}>
+            <div className={styles.textField}>
+              <textarea
+                placeholder={i18n.getString('typeMessage', this.props.currentLocale)}
+                value={this.props.messageText}
+                maxLength="1000"
+                onChange={this.onTextChange}
+              />
+            </div>
+            <div className={styles.submitField}>
+              <input
+                type="submit"
+                value={i18n.getString('send', this.props.currentLocale)}
+                className={styles.submitButton}
+                disabled={this.props.sendButtonDisabled}
+              />
+            </div>
           </div>
-          <input
-            type="submit"
-            value={i18n.getString('send', this.props.currentLocale)}
-            className={styles.submitButton}
-            disabled={this.props.sendButtonDisabled}
-          />
         </form>
       </div>
     );

src/components/ComposeTextPanel/styles.scss

@@ -1,104 +1,130 @@
 @import '../../lib/commonStyles/colors';
+@import '../../lib/commonStyles/full-size';
 
-.messageSenderField {
-  margin: 25px 5px 0 5px;
-  height: 50px;
+.root {
+  @include full-size;
+  font-family: Helvetica;
+}
+
+.senderField {
+  margin: 0 0 5px 0;
+  padding: 0 6px 1px 20px;
+  border-bottom: #e3e3e3 1px solid;
 	transition: height 0.5s ease-in;
+  color: #797979;
   overflow: hidden;
 
   label {
-    color: #555;
-    font-size: 13px;
-    line-height: 20px;
+    font-size: 12px;
+    line-height: 30px;
     display: block;
+    float: left;
   }
 
-  .valueInput {
-    border-bottom: 1px solid #e3e3e5;
-    padding-bottom: 3px;
+  .senderInput {
+    position: relative;
+    line-height: 30px;
+    margin-left: 45px;
   }
 }
 
-.hiddenField {
-  height: 0px;
-}
+.senderSelect {
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
 
-.sendNumberSetting {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-  color: #333;
-  text-decoration: none;
-  &:focus {
+  select:focus {
     outline: none;
   }
 }
 
-.messageReceiverField {
-  margin: 0 5px;
-  border-bottom: 1px solid #e3e3e5;
-  padding-bottom: 3px;
+.hiddenField {
+  height: 0px;
+}
+
+.receiverField {
+  margin-top: 10px;
+  padding: 0 10px 0 20px;
   position: relative;
+  color: #303030;
 
   label {
-    color: #b3b3b3;
-    font-size: 14px;
-    line-height: 27px;
+    font-size: 15px;
+    line-height: 29px;
     margin-right: 5px;
     float: left;
   }
 
   .rightPanel {
-    font-size: 13px;
+    font-size: 15px;
     display: block;
-    margin-left: 30px;
+    margin-left: 45px;
   }
 }
 
-.messageTextField {
-  margin: 10px 5px 0 5px;
+.buttomField {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 2px 2px 2px;
+  font-family: Helvetica;
+  border-top: 1px solid #e3e3e5;
+}
+
+.textField {
+  margin-right: 115px;
+
   textarea {
-    font-size: 14px;
+    background: transparent;
+    font-size: 13px;
     line-height: 18px;
     width: 100%;
-    margin-bottom: 5px;
+    margin: 10px 0 10px 10px;
     resize: none;
-    border-bottom: 1px solid #e3e3e5;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    background: #fff;
-    height: 200px;
+    border: none;
+    background: #transparent;
     outline: medium none!important;
     box-sizing: border-box!important;
+
+    &::placeholder {
+      color: #a9a9a9;
+    }
   }
 }
 
+.submitField {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 115px;
+  margin-top: -18px;
+}
+
 .submitButton {
   display: block;
-  margin: 0 auto 5px;
-  width: 115px;
+  margin: 0 auto;
+  width: 73px;
+  height: 36px;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 18px;
   padding: 7px;
-  border: 0;
-  border-radius: 3px;
+  border: $rc-blue 1px solid;
+  border-radius: 18px;
   outline: medium none!important;
   color: #fff;
   background-color: $rc-blue;
 }
 
 .submitButton:hover {
+  border: $rc-blue-highlight 1px solid;
   background-color: $rc-blue-highlight;
   color: #fff;
 }
 
 .submitButton:disabled {
-  background-color: #888888!important;
-}
-
-select {
-  width: 100%;
-  height: 100%;
+  background-color: #fff!important;
+  border: #c9c9c9 1px solid;
+  color: #a9a9a9;
 }

src/components/RecipientsInput/styles.scss

@@ -14,14 +14,17 @@
 }
 
 .numberInput {
-  color: #2f2f2f;
-  font-size: 12px;
-  line-height: 17px;
+  color: #303030;
+  font-size: 15px;
+  line-height: 20px;
   width: 100%;
   height: 27px;
   border-radius: 3px;
   border: 0;
   outline: 0;
+  &::placeholder {
+    font-size: 13px;
+  }
 }
 
 .contactsDropdown {

src/containers/ComposeTextPage/index.js

@@ -22,12 +22,22 @@ const ComposeTextPage = connect((state, props) => ({
   searchContactList: props.contactSearch.searching.result,
 }), (dispatch, props) => ({
   send: () =>
-    props.composeText.send().then((resp) => {
-      if (resp && resp.conversation) {
-        props.messageStore.pushMessage(resp);
-        props.composeText.clean();
-        props.router.history.push(`/conversations/${resp.conversation.id}`);
+    props.composeText.send().then((responses) => {
+      if (!responses || responses.length === 0) {
+        return null;
       }
+      props.messageStore.pushMessages(responses);
+      if (responses.length === 1) {
+        const conversationId =
+          responses[0] && responses[0].conversation && responses[0].conversation.id;
+        if (!conversationId) {
+          return null;
+        }
+        props.router.history.push(`/conversations/${conversationId}`);
+      } else {
+        props.router.history.push('/messages');
+      }
+      props.composeText.clean();
       return null;
     }),
   formatPhone: phoneNumber => (