support answerAndEnd and answerAndHold when call ring with a active call

src/components/ActiveCallButton/index.js

@@ -16,28 +16,32 @@ export default function ActiveCallButton(props) {
   return (
     <svg
       className={className}
-      viewBox="0 0 500 400"
+      viewBox="0 0 500 500"
       width={props.width}
       height={props.height}
       x={props.x}
       y={props.y}
     >
       <CircleButton
-        width={'250'}
-        height={'250'}
-        x={125}
+        width={'300'}
+        height={'300'}
+        x={100}
         y={0}
         className={buttonClassName}
         onClick={props.onClick}
         icon={props.icon}
         disabled={props.disabled}
         showBorder={props.showBorder}
         iconClassName={props.buttonClassName}
+        iconWidth={props.iconWidth}
+        iconHeight={props.iconHeight}
+        iconX={props.iconX}
+        iconY={props.iconY}
       />
       <text
         className={styles.buttonTitle}
         x="250"
-        y="340"
+        y="410"
         textAnchor="middle"
       >
         {props.title}
@@ -59,6 +63,10 @@ ActiveCallButton.propTypes = {
   height: PropTypes.string,
   x: PropTypes.number,
   y: PropTypes.number,
+  iconWidth: PropTypes.number,
+  iconHeight: PropTypes.number,
+  iconX: PropTypes.number,
+  iconY: PropTypes.number,
 };
 
 ActiveCallButton.defaultProps = {
@@ -72,4 +80,8 @@ ActiveCallButton.defaultProps = {
   height: '100%',
   x: 0,
   y: 0,
+  iconWidth: undefined,
+  iconHeight: undefined,
+  iconX: undefined,
+  iconY: undefined,
 };

src/components/ActiveCallButton/styles.scss

@@ -22,7 +22,7 @@ $title-height: 24px;
 
 .buttonTitle {
   @include secondary-font;
-  font-size: 73px;
+  font-size: 80px;
   fill: $darkergray;
 }
 

src/components/ActiveCallDialPad/styles.scss

@@ -46,6 +46,10 @@ $input-height: 30px;
   width: 33.3%;
   text-align: center;
   padding: 2px;
+
+  text {
+    font-size: 68px;
+  }
 }
 
 .stopButton {
@@ -59,5 +63,5 @@ $input-height: 30px;
 
 .buttonRow {
   text-align: center;
-  height: 35%;
+  height: 22%;
 }

src/components/ActiveCallPad/index.js

@@ -116,6 +116,8 @@ export default function ActiveCallPad(props) {
             onClick={props.hangup}
             icon={EndIcon}
             showBorder={false}
+            iconWidth={250}
+            iconX={125}
           />
         </div>
       </div>

src/components/ActiveCallPad/styles.scss

@@ -10,6 +10,8 @@
 
 .callButton {
   width: 33.33%;
+  box-sizing: border-box;
+  padding: 0 7px;
 }
 
 .buttonRow {
@@ -18,12 +20,16 @@
 }
 
 .button {
-  width: 17%;
+  width: 17.2%;
+  height: 100%;
   border-radius: 63%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
-  margin-top: 10px;
+
+  text {
+    font-size: 88px;
+  }
 }
 
 .stopButton {
@@ -36,7 +42,7 @@
 }
 
 .callCtrlButtonGroup {
-  height: 60%;
+  height: 70%;
 }
 
 .stopButtonGroup {

src/components/ActiveCallPanel/styles.scss

@@ -42,6 +42,7 @@ $avatar-width: 60px;
   padding-top: 15px;
   margin-left: auto;
   margin-right: auto;
+  box-sizing: border-box;
 }
 
 .avatarContainer {
@@ -103,5 +104,7 @@ $avatar-width: 60px;
 }
 
 .callPad {
-  height: calc(100% - 70px);
+  box-sizing: border-box;
+  height: calc(100% - 73px);
+  padding-bottom: 50px;
 }

src/components/CircleButton/index.js

@@ -13,10 +13,10 @@ function CircleButton(props) {
     icon = (
       <Icon
         className={classnames(styles.icon, props.iconClassName)}
-        width={200}
-        height={200}
-        x={150}
-        y={150}
+        width={props.iconWidth}
+        height={props.iconHeight}
+        x={props.iconX}
+        y={props.iconY}
       />
     );
   }
@@ -60,7 +60,11 @@ CircleButton.propTypes = {
   height: PropTypes.string,
   x: PropTypes.number,
   y: PropTypes.number,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  iconWidth: PropTypes.number,
+  iconHeight: PropTypes.number,
+  iconX: PropTypes.number,
+  iconY: PropTypes.number,
 };
 
 CircleButton.defaultProps = {
@@ -74,6 +78,10 @@ CircleButton.defaultProps = {
   height: '100%',
   x: 0,
   y: 0,
+  iconWidth: 200,
+  iconHeight: 200,
+  iconX: 150,
+  iconY: 150,
 };
 
 export default CircleButton;

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

@@ -4,4 +4,6 @@ export default {
   ignore: 'Ignore',
   toVoicemail: 'To Voicemail',
   answer: 'Answer',
+  answerAndEnd: 'Answer & End',
+  answerAndHold: 'Answer & Hold',
 };

src/components/IncomingCallPad/index.js

@@ -7,6 +7,8 @@ import 'rc-tooltip/assets/bootstrap_white.css';
 import ForwardForm from '../ForwardForm';
 import ReplyWithMessage from '../ReplyWithMessage';
 import ActiveCallButton from '../ActiveCallButton';
+import MultiCallAnswerButton from '../MultiCallAnswerButton';
+
 import MessageIcon from '../../assets/images/MessageFill.svg';
 import ForwardIcon from '../../assets/images/Forward.svg';
 import IgnoreIcon from '../../assets/images/Ignore.svg';
@@ -59,7 +61,59 @@ export default class IncomingCallPad extends Component {
       forwardingNumbers,
       formatPhone,
       className,
+      hasOtherActiveCall,
+      answerAndEnd,
+      answerAndHold,
     } = this.props;
+    // const isMultiCall = true;
+    const multiCallButtons = (
+      <div className={classnames(styles.buttonRow, styles.multiCallsButtonGroup)}>
+        <MultiCallAnswerButton
+          onClick={answerAndEnd}
+          title={i18n.getString('answerAndEnd', currentLocale)}
+          className={styles.callButton}
+          isEndOtherCall
+        />
+        <ActiveCallButton
+          onClick={toVoiceMail}
+          title={i18n.getString('toVoicemail', currentLocale)}
+          buttonClassName={styles.rejectButton}
+          icon={VoicemailIcon}
+          iconWidth={274}
+          iconX={116}
+          showBorder={false}
+          className={styles.callButton}
+        />
+        <MultiCallAnswerButton
+          onClick={answerAndHold}
+          title={i18n.getString('answerAndHold', currentLocale)}
+          className={styles.callButton}
+          isEndOtherCall={false}
+        />
+      </div>
+    );
+    const singleCallButtons = (
+      <div className={classnames(styles.buttonRow, styles.answerButtonGroup)}>
+        <ActiveCallButton
+          onClick={toVoiceMail}
+          title={i18n.getString('toVoicemail', currentLocale)}
+          buttonClassName={styles.rejectButton}
+          icon={VoicemailIcon}
+          iconWidth={274}
+          iconX={116}
+          showBorder={false}
+          className={styles.bigCallButton}
+        />
+        <ActiveCallButton
+          onClick={answer}
+          title={i18n.getString('answer', currentLocale)}
+          buttonClassName={styles.answerButton}
+          icon={AnswerIcon}
+          showBorder={false}
+          className={styles.bigCallButton}
+        />
+      </div>
+    );
     return (
       <div className={classnames(styles.root, className)}>
         <div
@@ -97,6 +151,8 @@ export default class IncomingCallPad extends Component {
           >
             <ActiveCallButton
               icon={ForwardIcon}
+              iconWidth={250}
+              iconX={125}
               onClick={() => null}
               title={i18n.getString('forward', currentLocale)}
               className={styles.callButton}
@@ -134,24 +190,7 @@ export default class IncomingCallPad extends Component {
             className={styles.callButton}
           />
         </div>
-        <div className={classnames(styles.buttonRow, styles.answerButtonGroup)}>
-          <ActiveCallButton
-            onClick={toVoiceMail}
-            title={i18n.getString('toVoicemail', currentLocale)}
-            buttonClassName={styles.rejectButton}
-            icon={VoicemailIcon}
-            showBorder={false}
-            className={styles.bigCallButton}
-          />
-          <ActiveCallButton
-            onClick={answer}
-            title={i18n.getString('answer', currentLocale)}
-            buttonClassName={styles.answerButton}
-            icon={AnswerIcon}
-            showBorder={false}
-            className={styles.bigCallButton}
-          />
-        </div>
+        {hasOtherActiveCall ? multiCallButtons : singleCallButtons}
       </div>
     );
   }
@@ -166,10 +205,16 @@ IncomingCallPad.propTypes = {
   formatPhone: PropTypes.func,
   onForward: PropTypes.func.isRequired,
   replyWithMessage: PropTypes.func.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  answerAndEnd: PropTypes.func,
+  answerAndHold: PropTypes.func,
+  hasOtherActiveCall: PropTypes.bool,
 };
 
 IncomingCallPad.defaultProps = {
   formatPhone: phone => phone,
   className: null,
+  answerAndEnd: () => null,
+  answerAndHold: () => null,
+  hasOtherActiveCall: false,
 };

src/components/IncomingCallPad/styles.scss

@@ -1,29 +1,29 @@
 .root {
   position: relative;
-  margin-left: 5%;
-  margin-right: 5%;
 }
 
 .buttonRow {
   text-align: center;
   margin-bottom: 10px;
-  height: 24%;
+  height: 26.5%;
+  margin-left: 5%;
+  margin-right: 5%;
 }
 
 .callButton {
   width: 33.33%;
   padding: 0;
 
   text {
-    font-size: 73px;
+    font-size: 78px;
   }
 }
 
 .bigCallButton {
   composes: callButton;
   width: 50%;
   text {
-    font-size: 65px;
+    font-size: 70px;
   }
 }
 
@@ -47,7 +47,20 @@
   width: 76%;
   margin-left: auto;
   margin-right: auto;
-  height: 27%;
+  height: 29%;
+}
+
+.multiCallsButtonGroup {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  height: 29.5%;
+
+  .callButton {
+    text {
+      font-size: 70px;
+    }
+  }
 }
 
 .forwardContainner{