@benshi.ai/js-sdk/src/drivers/notifications/BsCustomNotification.ts

Benshi SDK

import { NotificationAction, NotificationDispatcher } from "./typings";
import { EventEmitter } from 'events';


class BsCustomNotification extends EventEmitter implements NotificationDispatcher {

    _createContainer() {
        const containerClassname = 'benshi-notification-container'

        const listOfElements = document.getElementsByClassName(containerClassname)

        if (listOfElements.length !== 0) {
            return listOfElements[0]
        }

        const container = this._createElement(
            'div',
            document.querySelector('body'),
            {
                position: 'absolute',
                pointerEvents: 'none',
                top: '0px',
                width: '100%',
                backgroundColor: "#0000",
                display: "flex",
                flexDirection: "column",
                marginTop: "83px",
                alignItems: "center",
                zIndex: '1000000'
            }
        )

        container.setAttribute('class', containerClassname)
        container.setAttribute('role', 'dialog')

        return container
    }

    _createElement(elementName, container, styles) {
        const element = document.createElement(elementName)

        Object.keys(styles).forEach(key => {
            element.style[key] = styles[key]
        })

        container.appendChild(element)
        return element
    }

    show(title: string, body: string, id: number) {
        let container = this._createContainer()
        container = this._createContainer()

        const notificationSyles = {
            display: 'flex',
            pointerEvents: 'all',
            padding: '16px',
            borderRadius: '3px',
            backgroundColor: '#FCFCFD',
            width: '80%',
            position: 'relative',
            boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)'
        }
        const notification = this._createElement('div', container, notificationSyles)

        const contentStyle = {
            paddingRight: "40px",
            width: "100%"
        }
        const content = this._createElement('div', notification, contentStyle)

        const closeElementStyle = {
            padding: '5px',
            color: '#667085',
            position: 'absolute',
            top: '16px',
            right: '16px'
        }

        const closeElement = this._createElement('div', notification, closeElementStyle)
        closeElement.setAttribute('data-testid','close-custom-notification')

        const titleElement = this._createElement('div', content, 
            {
                fontWeight:'700', 
                color: '#1D2939'
            })

        const bodyElement = this._createElement('div', content, 
            {
                color: '#667085',
                fontWeight:'500'
            })

        titleElement.appendChild(document.createTextNode(title))
        bodyElement.innerHTML = body
        closeElement.appendChild(document.createTextNode('X'))

        closeElement.onclick = (evt) => {
            evt.stopPropagation()

            container.removeChild(notification)
            this.emit(NotificationAction.Discard, id)
        }

        notification.onclick = (evt) => {
            evt.stopPropagation()

            container.removeChild(notification)
            this.emit(NotificationAction.Open, id)
        }

    }

}

export default BsCustomNotification