PBN VOIP Component Library

A React component library for VOIP functionality including call management, fax, voicemail, and contact features.

Installation

Install via npm:

npm install pbn-voip-modules

Requirements

This library requires the following peer dependencies:

• React ^17.0.2
• React DOM ^17.0.2
• React Redux ^7.1.3
• @reduxjs/toolkit ^1.9.7

Usage

First, import the CSS in your app's entry point:

   import 'pbn-voip-modules/dist/styles.css';

Components

Call Management

1. Call Configuration Modal

  import { ModalCallConfiguration } from 'pbn-voip-modules';

  function App() {
  return (
  <ModalCallConfiguration
  isOpenModal={true}
  onClose={() => {}}
  isEnableCallPop={true}
  />
  );
  }

2. Make a Call Modal

  import { EnhancedModalMakeACall } from 'pbn-voip-modules';

  function App() {
  return (
  <EnhancedModalMakeACall
  isOpen={true}
  onClose={() => {}}
  isLoading={false}
  currentPhoneNo="+1234567890"
  />
  );
  }

Call Logs

1. Call Log Container

  import { WrappedEnhancedCallLogContainer } from 'pbn-voip-modules';

  function App() {
  return <WrappedEnhancedCallLogContainer />;
  }

2. Call Log Item

  import { CallLogItem, CALL_TYPE } from 'pbn-voip-modules';

  function App() {
  return (
  <CallLogItem
        callerName="John Doe"
        callType={CALL_TYPE.INBOUND}
        phoneNumber="+1234567890"
        entityType="Patient"
        duration="120"
        callDateTime="2024-01-07T10:00:00"
      />
  );
  }

Contacts

import { WrappedEnhancedContactContainer } from 'pbn-voip-modules';

function App() {
  return <WrappedEnhancedContactContainer isEnableCallPop={true} />;
}

Fax

import { WrappedEnhancedFaxContainer } from 'pbn-voip-modules';

function App() {
  return <WrappedEnhancedFaxContainer />;
}

Voicemail

import { WrappedEnhancedVoicemailContainer } from 'pbn-voip-modules';

function App() {
  return <WrappedEnhancedVoicemailContainer isEnableCallPop={true} />;
}

Settings

import { WrappedEnhancedSettingsContainer } from 'pbn-voip-modules';

function App() {
  return <WrappedEnhancedSettingsContainer />;
}

Environment Variables

The library requires the following environment variables:

REACT_APP_BASE_MIDDLEWARE_URL=your_middleware_url
REACT_APP_BASE_PBN_URL=your_pbn_url
REACT_APP_FAX_SERVICE_URL=your_fax_service_url
REACT_APP_FAX_CORE_SERVICE_URL=your_fax_core_url
REACT_APP_ORGANIZATION_ID=your_org_id
REACT_APP_PRACTICE_ID=your_practice_id
REACT_APP_EXTERNAL_KEY=your_external_key
REACT_APP_GOOGLE_MAP_KEY=your_google_map_key

Redux Integration

The library includes Redux slices for:

• Call Logs
• Contacts
• SIP
• User Management
• Call Blocking
• Media
• Extension
• Virtual Receptionist (IVR)

To use with your existing Redux store:

import { configureStore } from '@reduxjs/toolkit';
import {
  callLogs,
  contact,
  sip,
  user,
  callBlocking,
  media,
  extension,
  IVR
} from 'pbn-voip-modules';

const store = configureStore({
  reducer: {
    callLogs,
    contact,
    sip,
    user,
    callBlocking,
    media,
    extension,
    IVR,
    // ... your other reducers
  }
});

Development

To run the Storybook development environment:

npm run storybook

To build the library:

npm run build

Testing

Each component includes stories for testing in Storybook. Run Storybook to view and test components in isolation:

npm run storybook

License

[Your License]

Contributing

[Your Contributing Guidelines]