pbn-voip-modules/src/call-logs/components/elements/CallLogItem.jsx

PBN VOIP Component Library

import PropTypes from "prop-types";
import React, { useState } from "react";
import {
  IconDownloadFile,
  IconMissedCall,
  IconOutgoingCall,
  IncomingCallIcon,
} from "../../../general/assets/images/call-icons";
// import { IconCallAi } from "../../../general/assets/images/call-icons";
import { dateTimeFormater12hr } from "../../../general/common/utils";
import IconPopover from "../../../general/components/PatientPopover/IconPopover";
import { CALL_TYPE, COLOR_MAPS } from "../../common/constants";
import "./CallLogItem.scss";
// import { IconDownloadFile } from "../../../general/assets/images/call-icons";
import { IconDot } from "../../../general/assets/images/common-icons";
import { IconLoading } from "../../../general/assets/images/fax-icons";
import { getDemoClass } from "../../../general/common/utils/demoModeHandler";
import {
  formatUSPhoneNumber,
  showCallAnalyticsModal,
} from "../../../general/common/utils/ui";
import IconButton from "../../../general/components/elements/IconButton";
import { useChangeStatus } from "../../../general/hooks/useChangeStatus";
import useControlSingleAudio from "../../../general/hooks/useControlSingleAudio";
import CustomAudioPlayer from "../../../voicemail/components/elements/CustomAudioPlayer";
const { INCOMING, OUTBOUND, MISSED } = CALL_TYPE;

const CallLogItem = React.memo(
  ({
    callerName = "",
    callType = "",
    phoneNumber = "",
    entityType = "",
    messageUuid = "",
    duration = "",
    data = {},
    callDateTime = "",
    handleOpenPopover = () => {},
    voipCalls = [],
  }) => {
    const { onSetOpening, isOpen, onSetPending } = useChangeStatus();

    const [voipCallId, setVoipCallId] = useState(null);
    const [isDownloading, setIsDownloading] = useState(false);
    const { handlePlay, isLoading, url, handleAudioDownload } =
      useControlSingleAudio("call_recording");
    const { date, time } = dateTimeFormater12hr(callDateTime);

    const callIconDecider = () => {
      if (callType === MISSED) {
        return IconMissedCall;
      } else if (callType === OUTBOUND) {
        return IconOutgoingCall;
      }
      return IncomingCallIcon;
    };

    const handleCallAnalytics = async (data) => {
      const finalVoipCalls = voipCalls.filter(
        (call) =>
          call.recording_url !== null && call.recording_url !== undefined
      );
      showCallAnalyticsModal(
        data.practice_id,
        data.voip_call_id,
        finalVoipCalls
      );
    };

    const downloadMediaFile = async () => {
      setIsDownloading(true);
      await handleAudioDownload(data.recording_url.split("/")[1]);
      setIsDownloading(false);
    };

    const disableHandler = () => {
      return callType === MISSED || duration === 0 || !data.recording_url;
    };
    return (
      <div className={`call-log-item ${getDemoClass()}`}>
        <div className="align-h-start">
          <IconPopover
            params={{
              patientName: callerName,
            }}
            showRandomColor
          />

          <div className="call-details">
            <div
              className="caller-name"
              style={{ color: callType === MISSED && COLOR_MAPS[callType] }}
            >
              {callerName}

              {data.call_answered_by && (
                <div className="voip-call-answered-by">
                  Answered by : {data.call_answered_by}
                </div>
              )}
            </div>
            <div className="call-info">
              <div className="call-type">
                <div className="call-type-indicator">
                  <img src={callIconDecider()} alt="call-icon" />
                </div>
                <div className="call-type-text">
                  <span
                    style={{
                      color: COLOR_MAPS[callType],
                      textTransform: "capitalize",
                    }}
                  >
                    {callType}
                  </span>
                </div>
              </div>
              <div className="separator"></div>
              <div
                className="patient-text"
                style={{ color: callType === MISSED && COLOR_MAPS[callType] }}
              >
                {entityType}
              </div>
              <div className="separator"></div>
              <div
                className="phone-number"
                style={{ color: callType === MISSED && COLOR_MAPS[callType] }}
              >
                {formatUSPhoneNumber(phoneNumber)}
              </div>
            </div>
          </div>
        </div>
        {/* Audio Player */}
        <div className="align-h-start call-recording-conatiner">
          {/* {window?.voip_current_user_permission?.call_recording_soft_dialer ? ( */}
          <>
            {disableHandler() ? (
              <div className="duration-container">
                <div> 0:00</div>
              </div>
            ) : (
              <div className="audio-player-container">
                <CustomAudioPlayer
                  handlePlay={() => {
                    handlePlay(data.recording_url);
                  }}
                  setPlay={() => onSetOpening()}
                  mediaURL={url}
                  disabled={isLoading}
                  key={messageUuid}
                  id={messageUuid}
                  duration={duration}
                  isLoadingAudio={isLoading}
                  demoModeClassName={getDemoClass()}
                  audioPlayerClassName="call-logs-audio-player"
                />
              </div>
            )}

            <button
              className="status-indicator"
              onClick={downloadMediaFile}
              disabled={isDownloading || disableHandler()}
              style={{
                opacity: disableHandler() ? 0.2 : 1,
              }}
            >
              <img
                src={isDownloading ? IconLoading : IconDownloadFile}
                alt="download-icon"
                className={`${isDownloading ? "icon--small" : ""} `}
              />
            </button>
            <button
              className="status-indicator"
              onClick={() => handleCallAnalytics(data)}
              disabled={disableHandler()}
              style={{
                opacity: disableHandler() ? 0.2 : 1,
                color: "#1b2a55",
              }}
            >
              AI
            </button>
          </>
          {/* ) : null} */}
        </div>
        <div className="align-h-start">
          <div className="timestamp">
            <div className="time-text">{time}</div>
            <div className="date-text">{date}</div>
          </div>
          <div className="action-indicator">
            <IconButton
              icon={IconDot}
              onClick={(e) => {
                handleOpenPopover(data, e);
              }}
              className="action-indicator--more-button"
            />
          </div>
        </div>
      </div>
    );
  }
);

CallLogItem.propTypes = {
  callerName: PropTypes.string,
  callType: PropTypes.oneOf([
    CALL_TYPE.INCOMING,
    CALL_TYPE.OUTBOUND,
    CALL_TYPE.MISSED,
  ]),
  phoneNumber: PropTypes.string,
  entityType: PropTypes.string,
  messageUuid: PropTypes.string,
  duration: PropTypes.string,
  data: PropTypes.object,
  callDateTime: PropTypes.string,
  handleOpenPopover: PropTypes.func,
};

export default CallLogItem;