diff --git a/docs/src/app/pages/Components/IncomingCallPad/Demo.js b/docs/src/app/pages/Components/IncomingCallPad/Demo.js index 599fe9a4e3..4f6b63847e 100644 --- a/docs/src/app/pages/Components/IncomingCallPad/Demo.js +++ b/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 = [{ diff --git a/package.json b/package.json index cc947c19c7..da6bde33d5 100644 --- a/package.json +++ b/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", diff --git a/src/components/IncomingCallPad/index.js b/src/components/IncomingCallPad/index.js index 915aa003b3..56a16e5b4b 100644 --- a/src/components/IncomingCallPad/index.js +++ b/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; }} /> +
{ + this.replyWithMessageContainner = containner; + }} + />
- console.log('test')} - icon={MessageIcon} - title={i18n.getString('reply', currentLocale)} - className={styles.callButton} - /> + } + getTooltipContainer={() => this.replyWithMessageContainner} + overlay={ + + } + > + null} + icon={MessageIcon} + title={i18n.getString('reply', currentLocale)} + className={styles.callButton} + /> + + + + + props.onSelectTimeUnit(MINS)} + className={props.timeUnit === MINS ? styles.timeUnitSelected : null}> + {i18n.getString('min', props.currentLocale)} + + props.onSelectTimeUnit(HOURS)}> + {i18n.getString('hours', props.currentLocale)} + + props.onSelectTimeUnit(DAYS)}> + {i18n.getString('days', props.currentLocale)} + +
+ ); +} + +TimeInput.propTypes = { + currentLocale: PropTypes.string.isRequired, + timeValue: PropTypes.string, + timeUnit: PropTypes.number, + inputRef: PropTypes.func.isRequired, + onTimeValueChange: PropTypes.func.isRequired, + onSelectTimeUnit: PropTypes.func.isRequired, +}; + +TimeInput.defaultProps = { + timeValue: '', + timeUnit: MINS, +}; + +export default class ReplyWithMessage extends Component { + constructor(props) { + super(props); + this.state = { + type: ON_MY_WAY, + customValue: '', + callYouTimeValue: '', + callYouTimeUnit: MINS, + callMeTimeValue: '', + callMeTimeUnit: MINS, + }; + + this.onSelectType = (index) => { + this.setState({ + type: index, + }); + this.props.onChange(this._getValue()); + }; + + this.onCustomValueChange = (e) => { + const value = e.target.value; + this.setState({ + customValue: value, + }); + this.props.onChange(this._getValue()); + }; + + this.onCallYouTimeValueChange = (e) => { + const value = e.target.value; + this.setState({ + callYouTimeValue: value.replace(cleanRegex, ''), + }); + }; + + this.onCallYouTimeUnitChange = (unit) => { + this.setState({ + callYouTimeUnit: unit, + }); + }; + + this.onCallMeTimeValueChange = (e) => { + const value = e.target.value; + this.setState({ + callMeTimeValue: value.replace(cleanRegex, ''), + }); + }; + + this.onCallMeTimeUnitChange = (unit) => { + this.setState({ + callMeTimeUnit: unit, + }); + }; + + this.onReply = () => { + this.props.onReply(this._getValue()); + }; + this.onCallYouInputRef = (input) => { + this.callYouInputRef = input; + }; + this.onCallMeInputRef = (input) => { + this.callMeInputRef = input; + }; + } + + _getValue() { + const value = { replyType: 0 }; + if (this.state.type === CUSTOM_MESSAGE) { + value.replyText = this.state.customValue; + } + if (this.state.type === ON_MY_WAY) { + value.replyText = 'On my way'; + } + if (this.state.type < 2) { + value.replyType = 1; + value.callbackDirection = this.state.type; + if (this.state.type === 0) { + value.timeValue = this.state.callYouTimeValue; + value.timeUnits = this.state.callYouTimeUnit; + value.replyText = this.state.callYouTimeValue; + } else { + value.timeValue = this.state.callMeTimeValue; + value.timeUnits = this.state.callMeTimeUnit; + value.replyText = this.state.callMeTimeValue; + } + } + return value; + } + + render() { + const { + className, + onCancel, + currentLocale, + } = this.props; + const disableButton = isBlank(this._getValue().replyText); + return ( +
+
+
{ + this.onSelectType(CALL_YOU); + setTimeout(() => { + this.callYouInputRef.focus(); + }, 100); + }} + className={classnames( + styles.messageItem, this.state.type === CALL_YOU ? styles.active : null + )} + > +
{i18n.getString('willCallYouBackIn', currentLocale)}...
+
+ +
+
+
{ + this.onSelectType(CALL_ME); + setTimeout(() => { + this.callMeInputRef.focus(); + }, 100); + }} + className={classnames( + styles.messageItem, this.state.type === CALL_ME ? styles.active : null + )} + > +
{i18n.getString('callMeBackIn', currentLocale)}...
+
+ +
+
+
this.onSelectType(ON_MY_WAY)} + className={classnames( + styles.messageItem, this.state.type === ON_MY_WAY ? styles.active : null + )} + > +
{i18n.getString('onMyWay', currentLocale)}
+
+
{ + this.onSelectType(CUSTOM_MESSAGE); + setTimeout(() => { + this.customValueInput.focus(); + }, 100); + }} + className={classnames( + styles.messageItem, this.state.type === CUSTOM_MESSAGE ? styles.active : null + )} + > +
{i18n.getString('customMessage', currentLocale)}
+
+