@causalfoundry/js-sdk/src/drivers/notifications/CfCustomNotification.ts

Causal Foundry WEB SDK (JS/TS)

import { NotificationAction, NotificationDispatcher } from "./typings";
import { EventEmitter } from 'events';
import {
    Nudge,
    NudgeExtraItemPairObject,
    NudgeExtraObject,
    NudgeTemplateObject
} from "../../core/repositories/nudges/typings";
import CfExceptionHandler from "../../core/CfExceptionHandler";
import {removeUndefined} from "typedoc/dist/lib/converter/utils/reflections";


class CfCustomNotification extends EventEmitter implements NotificationDispatcher {

    _createContainer() {
        const containerClassname = 'cf-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(nudge: Nudge, id: number) {
        let container = this._createContainer()
        container = this._createContainer()

        const notificationStyles = {
            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, notificationStyles)

        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(nudge.nd.message.title))

        this.emit(NotificationAction.Shown, id)

        bodyElement.innerHTML = nudge.nd.message.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 CfCustomNotification