# 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]