add reply message feature

docs/src/app/pages/Components/IncomingCallPad/Demo.js

@@ -5,6 +5,7 @@ import IncomingCallPad from 'ringcentral-widget/components/IncomingCallPad';
 const props = {};
 props.answer = () => null;
 props.reject = () => null;
+props.replyWithMessage = () => null;
 props.toVoiceMail = () => null;
 props.currentLocale = 'en-US';
 props.forwardingNumbers = [{

package.json

@@ -84,7 +84,7 @@
     "redux-thunk": "^2.1.0",
     "ringcentral": "^3.1.1",
     "ringcentral-client": "^1.0.0-rc1",
-    "ringcentral-integration": "^0.7.0-rc5",
+    "ringcentral-integration": "^0.7.0-rc10",
     "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",

src/components/IncomingCallPad/index.js

@@ -4,6 +4,7 @@ import Tooltip from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap_white.css';
 
 import ForwardForm from '../ForwardForm';
+import ReplyWithMessage from '../ReplyWithMessage';
 import ActiveCallButton from '../ActiveCallButton';
 import MessageIcon from '../../assets/images/MessageFill.svg';
 import ForwardIcon from '../../assets/images/Forward.svg';
@@ -19,6 +20,9 @@ export default class IncomingCallPad extends Component {
     super(props);
     this.state = {
       showForward: false,
+      forwardNumber: '',
+      replyMessage: null,
+      showReplyWithMessage: false,
     };
     this.onShowForwardChange = (visible) => {
       this.setState({
@@ -32,6 +36,17 @@ export default class IncomingCallPad extends Component {
     this.closeForwardForm = () => {
       this.onShowForwardChange(false);
     };
+    this.onShowReplyWithMessageChange = (visible) => {
+      this.setState({
+        showReplyWithMessage: visible,
+      });
+    };
+    this.onReplyMessageChange = (message) => {
+      this.setState({ replyMessage: message });
+    };
+    this.closeReplyWithMessage = () => {
+      this.onShowReplyWithMessageChange(false);
+    };
   }
 
   render() {
@@ -51,6 +66,12 @@ export default class IncomingCallPad extends Component {
             this.forwardContainner = containner;
           }}
         />
+        <div
+          className={styles.replyWithMessageContainner}
+          ref={(containner) => {
+            this.replyWithMessageContainner = containner;
+          }}
+        />
         <div className={styles.buttonRow}>
           <Tooltip
             defaultVisible={false}
@@ -79,12 +100,31 @@ export default class IncomingCallPad extends Component {
               className={styles.callButton}
             />
           </Tooltip>
-          <ActiveCallButton
-            onClick={() => console.log('test')}
-            icon={MessageIcon}
-            title={i18n.getString('reply', currentLocale)}
-            className={styles.callButton}
-          />
+          <Tooltip
+            defaultVisible={false}
+            visible={this.state.showReplyWithMessage}
+            onVisibleChange={this.onShowReplyWithMessageChange}
+            placement="top"
+            trigger="click"
+            arrowContent={<div className="rc-tooltip-arrow-inner" />}
+            getTooltipContainer={() => this.replyWithMessageContainner}
+            overlay={
+              <ReplyWithMessage
+                currentLocale={currentLocale}
+                onCancel={this.closeReplyWithMessage}
+                value={this.state.replyMessage}
+                onChange={this.onReplyMessageChange}
+                onReply={this.props.replyWithMessage}
+              />
+            }
+          >
+            <ActiveCallButton
+              onClick={() => null}
+              icon={MessageIcon}
+              title={i18n.getString('reply', currentLocale)}
+              className={styles.callButton}
+            />
+          </Tooltip>
           <ActiveCallButton
             onClick={reject}
             icon={IgnoreIcon}
@@ -123,6 +163,7 @@ IncomingCallPad.propTypes = {
   forwardingNumbers: PropTypes.array.isRequired,
   formatPhone: PropTypes.func,
   onForward: PropTypes.func.isRequired,
+  replyWithMessage: PropTypes.func.isRequired,
 };
 
 IncomingCallPad.defaultProps = {

src/components/IncomingCallPad/styles.scss

@@ -58,3 +58,26 @@
     }
   }
 }
+
+.replyWithMessageContainner {
+  display: block;
+  width: 60%;
+  height: 1px;
+  :global .rc-tooltip {
+    z-index: 9;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
+    border: solid 1px #e3e3e3;
+    border-radius: 0;
+    opacity: 1;
+    width: 79%;
+    min-width: 192px;
+    background: #fff;
+  }
+  :global .rc-tooltip-inner {
+    padding: 0;
+    border: none;
+  }
+  :global .rc-tooltip-arrow {
+    border-top-color: #e3e3e3;
+  }
+}

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

@@ -0,0 +1,11 @@
+export default {
+  cancel: 'Cancel',
+  send: 'Send',
+  onMyWay: 'On my way',
+  customMessage: 'Custom Message',
+  callMeBackIn: 'Call me back in',
+  willCallYouBackIn: 'Will call you back in',
+  min: 'min.',
+  hours: 'hours',
+  days: 'days',
+};

src/components/ReplyWithMessage/i18n/index.js

@@ -0,0 +1,4 @@
+import I18n from 'ringcentral-integration/lib/I18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);

src/components/ReplyWithMessage/i18n/loadLocale.js

@@ -0,0 +1 @@
+/* loadLocale */