docs: function WebphoneButtons({
    currentLocale,
    session,
    webphoneReject,
    webphoneHangup,
    webphoneResume,
    webphoneAnswer,
    webphoneHold,
    showMergeCall,
    showHold,
    disableMerge,
    onMergeCall,
    disableLinks,
  }) {
    if (!session) {
      return null;
    }
    let hangupFunc = webphoneHangup;
    let endIcon = EndIcon;
    let answerBtn = null;
  
    let rejectTitle = i18n.getString('hangup', currentLocale);
    const holdTitle = i18n.getString('hold', currentLocale);
    const unholdTitle = i18n.getString('unhold', currentLocale);
  
    if (
      isInbound(session) &&
      session.callStatus === sessionStatus.connecting
    ) {
      hangupFunc = webphoneReject;
      endIcon = VoicemailIcon;
      rejectTitle = i18n.getString('toVoicemail', currentLocale);
      showHold = false;
      answerBtn = (
        <span title={i18n.getString('accept', currentLocale)} className={styles.webphoneButton}>
          <CircleButton
            className={styles.answerButton}
            onClick={(e) => {
              e.stopPropagation();
              webphoneAnswer(session.id);
            }}
            icon={AnswerIcon}
            showBorder={false}
            disabled={disableLinks}
          />
        </span>
      );
    }
  
    let holdBtn;
    let mergeBtn;
  
    if (showHold) {
      if (isOnHold(session)) {
        holdBtn = (
          <span title={unholdTitle} className={styles.webphoneButton}>
            <CircleButton
              className={classnames(styles.holdButton, styles.active)}
              onClick={(e) => {
                e.stopPropagation();
                webphoneResume(session.id);
              }}
              iconWidth={260}
              iconX={120}
              icon={HoldIcon}
              disabled={disableLinks}
              showBorder
            />
          </span>
        );
      } else {
        holdBtn = (
          <span title={holdTitle} className={styles.webphoneButton}>
            <CircleButton
              className={styles.holdButton}
              onClick={(e) => {
                e.stopPropagation();
                webphoneHold(session.id);
              }}
              iconWidth={260}
              iconX={120}
              icon={HoldIcon}
              disabled={disableLinks}
              showBorder
            />
          </span>
        );
      }
    }
  
    if (showMergeCall) {
      const mergeTitle = i18n.getString('mergeToConference', currentLocale);
  
      mergeBtn = (
        <span title={mergeTitle} className={styles.webphoneButton}>
          <CircleButton
            className={
              classnames({
                [styles.mergeButton]: true,
                [styles.disabled]: disableMerge
              })
            }
            onClick={(e) => {
              e.stopPropagation();
              onMergeCall(session.id);
            }}
            iconWidth={260}
            iconX={120}
            icon={MergeIntoConferenceIcon}
            showBorder
            disabled={disableMerge || disableLinks}
          />
        </span>
      );
    }
  
    return (
      <div className={styles.webphoneButtons}>
        {mergeBtn}
        {holdBtn}
        <span title={rejectTitle} className={styles.webphoneButton}>
          <CircleButton
            className={styles.rejectButton}
            onClick={(e) => {
              e.stopPropagation();
              hangupFunc(session.id);
            }}
            iconWidth={260}
            iconX={120}
            icon={endIcon}
            showBorder={false}
            disabled={disableLinks}
          />
        </span>
        {answerBtn}
      </div>
    );
  }