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
}