pbn-voip-modules
Version:
PBN VOIP Component Library
205 lines (146 loc) • 3.75 kB
Markdown
# 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]