Da-dialler NPM

Using `da-dialler` Package

This guide will help you integrate the da-dialler package into your React and Next.js applications to add a dialler component.

React App Integration

Install the da-dialler package:
```
npm install da-dialler@latest
```

Create the Dialler Component:

import DaDialler from "da-dialler";
import { useContext, useEffect } from "react";
import {
  InitPhoneConfig,
  NotificationPlacement,
} from "da-dialler/dist/types/DataTypes";

const notify = (
  type: string,
  placement: NotificationPlacement,
  message: string,
  description: string
) => {
  // Handle Notification toasts
};

const initSipConfig = {
  notificationCallback: notify,
  customAgentName: "Joe",
  sipPassword: "Temp@123",
  sipExtension: "5607",
  sipDomainURL: "demo.dial-afrika.com",
  domainPort: "7443",
};

const App = () => {
  return (
    <> // Your Layout and at this node, your Dialler Container.
      <Dialler {...initSipConfig} />
    </>
  );
};

/*
** Create a Dialler component to handle phone context and state.
** the context is of type PhoneState and should allow you to 
** access all dialler methods through the context, 

** @config: InitPhoneConfig
** add your Sip Configs here and trigger a dialler rerender.

** phone connection at this point is usually handled with the 
** log in state to connect the phone immediately after login.
** if that doesn't happen, the dialler status ques should let 
** you know, and a notification trigger is invoked for the same.
** Users still have the manual connect option on the Dialler.
*/
function Dialler(config: InitPhoneConfig) {
  const phoneState = useContext(DaDialler.PhoneContext);

  useEffect(() => {
    console.log("Phone State", phoneState);
    if (phoneState) {
      phoneState.phone.connect();
    }
  }, [phoneState]);

  return (
    <>
      <button onClick={() => phoneState?.clickToDial("123456")}>
        Click to Dial
      </button>
      <DaDialler.Dialler {...config} />
    </>
  );
}

export default App;

Run your React app:
```
npm start
```

Next.js App Integration

Install the da-dialler package:
```
npm install da-dialler
```

Create the Dialler Component:

import DaDialler from "da-dialler";
import { useContext, useEffect } from "react";
import { InitPhoneConfig } from "da-dialler/dist/types/DataTypes";

const notify = (
  type: string,
  placement: any,
  message: string,
  description: string
) => {
  console.log(
    "Notification Callback",
    type,
    placement,
    message,
    description
  );
};

const initSipConfig = {
  notificationCallback: notify,
  customAgentName: "Joe",
  sipPassword: "Temp@123",
  sipExtension: "5607",
  sipDomainURL: "demo.dial-afrika.com",
  domainPort: "7443",
};

const Home = () => {
  return (
    <div
      style={{
        padding: ".5rem",
        position: "fixed",
        right: 0,
        bottom: 0,
      }}
    >
      <Dialler {...initSipConfig} />
    </div>
  );
};

function Dialler(config: InitPhoneConfig) {
  const phoneState = useContext(DaDialler.PhoneContext);

  useEffect(() => {
    console.log("Phone State", phoneState);
    if (phoneState) {
      phoneState.phone.connect();
    }
  }, [phoneState]);

  return (
    <>
      <button onClick={() => phoneState?.clickToDial("123456")}>
        Click to Dial
      </button>
      <DaDialler.Dialler {...config} />
    </>
  );
}

export default Home;