2.6.0 • Published 5 months ago

da-dialler v2.6.0

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

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

  1. Install the da-dialler package:

    npm install da-dialler@latest
  2. 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;
  3. Run your React app:

    npm start

Next.js App Integration

  1. Install the da-dialler package:

    npm install da-dialler
  2. 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;
  3. Run your Next.js app:

    npm run dev

By following these steps, you can integrate the da-dialler package into your React or Next.js application and add a dialler component.