Synthetic.ua

This source code is proprietary. Keep this repository in a safe place. Do not email, communicate, or distribute this software in any part or in full.

Overview

Synthetic.ua Messenger is a component library that uses for Synthertic.ua services. It allows to use universal messenger in any Synthetic.ua project.

External usage

To use library in another project you can just install it using npm, import and use main component.

Installing:

npm install messenger

or

yarn add messenger

Common usage:

<template>
  <div>
    <Messenger ref="messengerRef" />
  </div>
</template>

<script>
  import Messenger from 'messenger'

  type MessengerData = {
    domain: string
    base_url: string
    role: 'moderator' | 'customer' | 'seller'
    language: 'uk' | 'ru' | 'en'
    marketplace_url: string
    cdn_path_function: Function
    sso_access_token: string
  }

  const messengerRef = ref<Messenger>()
  const messengerData: MessengerData = {...}
  // ...
  messengerRef.value.install(messengerData)
  // ...
  messengerRef.value.uninstall()
</script>

<style>
@import 'messenger/dist/style.css';
</style>

Add and open new chat:

messengerRef.value.addChat({
  role: 'customer' | 'moderator' | 'seller',
  uuid: string
})

Use widget style

Using widget style means that you need to use it like small block, not the page in your application. You can use it like this:

<template>
  <div>
    <Messenger ref="messengerRef" useWidgetStyle />
  </div>
</template>

Development and test

Messenger is independent and don't store and share any variables. We use wrapper for messenger to test it locally, use envs when you need to test something or develop new features.

1. Install Node.js (16.x - latest)
2. Install dependencies with npm install
3. Create .env file with .env.example contents
4. Run the wrapper app with npm run dev

Envs (all required)

| Variable | Type | Description | | ------------------------ | -------- | ---------------------------------------------------------------------- | | VITE_APP_TOKEN | Token | Synthetic SSO token. | | VITE_APP_BASE_DOMAIN | URL | Messenger Domain. | | VITE_APP_BASE_URL | URL | Base messenger API url. | | VITE_APP_CDN_URL | URL | CDN URL, needed to fetch and handle images. | | VITE_APP_MARKETPLACE_URL | URL | Marketplace URL, need to create urls for marketplace products and etc. |

GitFlow

Please make PRs against master using a feat/{project}-{issue_number} branching convention ex: feat/RNDM-111