@evo/chat-prom-desktop

v0.15.10

Published

a year ago

prom desktop chat view mechanizm

Downloads

511

0High
0Medium
0Low

Desktop view package of @evo chat, with main data control module @evo/chat-core. All styles, images and translations are in build, so u don't need to worry about. It`s easy to mount, and push/subscribe on the events, through BesidaChat class. To quick start , follow basic usage guide.

Installation

npm install --save -E @evo/chat-prom-desktop

Basic Usage

On DOM node rendering

import { getUserInfo, init as initUserFetch } from '@evo/user-info';
import { BesidaChat } from '@evo/chat-prom-desktop';

// if u already have user, this step is unnecessary
initUserFetch(window.location.host);

let userInfo = {};

try { userInfo = await getUserInfo(); }
catch (_) { userInfo = null; }

if (userInfo && userInfo.id) {
    config.initAppData.user_id = userInfo.id;
}

// some root node to mount in
const besidaRoot = document.getElementById('besida');

// it`s important to know, are u a company or a buyer
const userRoles = BesidaChat.userRoles/*.(company|buyer)*/;

const besidaObj = new BesidaChat(
    initAppData, // base data for app to run, like context, theme, etc
    config, // includes flags and temp deps to inject, like analytics
    userRoles.buyer, 
    besidaRoot
);

For SPA like

In case u have mwa, first steps for init chat is similar to on DOM node rendering, except u must omit last node param.

import React from 'react';

const besidaObj = new BesidaChat(
    initAppData,
    config,
    userRoles.buyer
);

const BesidaChatApp = besidaObj.chatAppComponent;

class AwesomeApp extends React.Component {
    render() {
        return (
            <React.Fragment>
                <Header />
                <Body> {BesidaChatApp} </Body>
                <Footer />
            </React.Fragment>
        );
    }
}

Subscribing/pushing events

Once u create a valid BesidaChat instance, u can import it in any numbers of ur modules, it`ll be the same chat, u have created on ur app start.

BesidaChat.instance.dispatchEvent('openDialog', params || { node: target });

U can pick, from public actions list, for now there are: openDialog - open chat window, if u want to open room with cntx send, u should give this obj as arg:

const params = {
    theme: '345345_buyer' // first part, before `_` is company id
    // rest is product data, u want to see in cntx msg
    contextItemId: 456234,
    contextItemType: 'product',
    contextItemPrice: '100.34',
    contextItemCurrency: 'грн',
    contextDescription: 'Magic gout`s lag',
    contextMeta: 'prosaleHashe'
}

openRoom - open direct chat room, takes one arg roomIdent, setLocale - change actual language, takes one of languages in same name static field.

Methods of subscription are static, coz u may not know the order of components to init, but u want for some reason, to add callback function right in that place. U are free to do this:

const removeLister = BesidaChat.addInitListener(() => /* Doing stuff here */void 0);
//it`s actual for SPA to remove event listeners on page change, in case u do not have chat there
// or some other reason, u just call returned remove lister with bind index on ur func
removeLister();

There are one more method for subscribing, addUpdateListener, it`s conveniently to use, when u need to sync state with some outer components.

Init app data, flags and deps

List of all required and custom properties u should provide to Chat.

Config

{
    // from CS config
    promConfig: {
        // urls, used for HTTP transports
        defaultOrigin,
        currentDomain,
        portalHomePage,
        personalDataProcessDoc,
        komoraUrl,
    
        //boolean data
        besidaIsMobile,
        userIsSudoMode,
        isRuprom,
        isBelprom,
        isKzprom,
        isDebug,
    
        // page depends data
        defaultCurrencyText
    
        // feature flags
        coreBesidaRoomBan,
        vasNewRussianPolicyLaw,
        contentPowerEnabled,
        coreBesidaImageUpload,
        coreBannedSKKNotification,

        // inited Swindon connection object getter and connection status callback
        getSocketConnectionObj, 
        addStateCallback,
    },

    tempDeps: {
        // All of this deps will be removed,
        // as soon as they will get packges
        FormTracker,
        tracking
    }
}

initAppData

{
    auto_knock_knock, // room auto join `url`, u can look in Besida serv, how it`s formed
    user_id, // user ident, if u have it
    onPortal, // boolean statement
    withoutButton, // boolean statement, don't render button in mount node
    userHasCompany, // boolean statement
    userHasC2CCompany, // boolean statement
    context_item_id, // product params, for cntx send
    context_item_type,
    context_item_price, 
    context_item_currency,
    context_description,
    context_meta,
    social_auth, // list of obj, for social auth
    theme, // room ident, `${oponentId}_${role}`
    isInBuyerCabinet, // boolean, buyer is under /cabinet url, but basicly it`s client chat
    pageType, // from AppState, for analytics
    device, initialAppData.isMobile ? 'phone' : 'desktop' // for analytics
    locale initialAppData.locale || c.DEFAULT_LOCALE, // u can set start up locations, from static languages list
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme