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

Causal Foundry WEB SDK (JS/TS)

import { NotificationDispatcher } from "./typings";
import { EventEmitter } from 'events';
import {Nudge, NudgeAction} from "../../core/repositories/nudges/typings";
import Navigation from "../../modules/Navigation";
import {CfLogEvents} from "../../core/commonTypes";


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) {
        const 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')
        closeElement.appendChild(document.createTextNode('X'))

        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.content.title))
        bodyElement.innerHTML = nudge.content.body

        closeElement.onclick = (evt) => {
            evt.stopPropagation()
            container.removeChild(notification)
            Navigation.logPushNotificationEvent({
                response: NudgeAction.Discard,
                details: "",
                internal: nudge.internal
            })
        }
        notification.onclick = (evt) => {
            evt.stopPropagation()
            container.removeChild(notification)
            this.emit(NudgeAction.Open, nudge)
        }
        Navigation.logPushNotificationEvent({
            response: NudgeAction.Shown,
            details: "",
            internal: nudge.internal
        })

    }

}

export default CfCustomNotification