UNPKG

pbn-voip-modules

Version:

PBN VOIP Component Library

205 lines (146 loc) 3.75 kB
# 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]