feature: add messaging tab[WTEL-3529]

package.json

@@ -13,7 +13,7 @@
     "@vue/compat": "^3.3.9",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.2",
-    "@webitel/ui-sdk": "^24.4.5",
+    "@webitel/ui-sdk": "^24.4.6",
     "axios": "^1.6.5",
     "core-js": "^3.8.3",
     "deep-equal": "^2.2.1",
@@ -22,7 +22,7 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.0.3",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^23.9.5"
+    "webitel-sdk": "^24.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -38,6 +38,7 @@
     "husky": "^8.0.3",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "sass": "^1.32.7",
+    "tslib": "^2.6.2",
     "vite": "^5.0.11",
     "vite-plugin-node-polyfills": "^0.19.0",
     "vite-plugin-svg-sprite": "^0.5.1",

src/app/locale/en/en.js

@@ -1,3 +1,5 @@
+import ChatGatewayProvider
+  from '@webitel/ui-sdk/src/enums/ChatGatewayProvider/ChatGatewayProvider.enum';
 import AccessMode
   from '../../../modules/contacts/modules/permissions/enums/AccessMode.enum';
 
@@ -25,6 +27,19 @@ export default {
         editTitle: 'Edit the phone number',
         dummy: 'There are no phone numbers yet',
       },
+      messaging: {
+        gateway: 'Gateway',
+        provider: 'Provider ',
+        dummy: 'There is no messaging options yet',
+        messengers: {
+          [ChatGatewayProvider.TELEGRAM_BOT]: 'Telegram Bot',
+          [ChatGatewayProvider.TELEGRAM_APP]: 'Telegram App',
+          [ChatGatewayProvider.MESSENGER]: 'Meta',
+          [ChatGatewayProvider.VIBER]: 'Viber',
+          [ChatGatewayProvider.WEBCHAT]: 'Web chat',
+          [ChatGatewayProvider.INFOBIP]: 'Infobip',
+        },
+      },
     },
     attributes: 'Attribute | Attributes',
   },

src/app/locale/ru/ru.js

@@ -1,3 +1,5 @@
+import ChatGatewayProvider
+  from '@webitel/ui-sdk/src/enums/ChatGatewayProvider/ChatGatewayProvider.enum';
 import AccessMode
   from '../../../modules/contacts/modules/permissions/enums/AccessMode.enum';
 
@@ -25,6 +27,19 @@ export default {
         editTitle: 'Редактировать номер телефона',
         dummy: 'Телефонные номера еще не добавлены',
       },
+      messaging: {
+        gateway: 'Шлюз',
+        provider: 'Провайдер',
+        dummy: 'Пока еще не было текстовых диалогов',
+        messengers: {
+          [ChatGatewayProvider.TELEGRAM_BOT]: 'Telegram Бот',
+          [ChatGatewayProvider.TELEGRAM_APP]: 'Telegram Приложение',
+          [ChatGatewayProvider.MESSENGER]: 'Meta',
+          [ChatGatewayProvider.VIBER]: 'Viber',
+          [ChatGatewayProvider.WEBCHAT]: 'Web chat',
+          [ChatGatewayProvider.INFOBIP]: 'Infobip',
+        },
+      },
     },
     attributes: 'Атрибут | Атрибуты',
   },

src/app/locale/ua/ua.js

@@ -1,3 +1,5 @@
+import ChatGatewayProvider
+  from '@webitel/ui-sdk/src/enums/ChatGatewayProvider/ChatGatewayProvider.enum';
 import AccessMode
   from '../../../modules/contacts/modules/permissions/enums/AccessMode.enum';
 
@@ -25,6 +27,19 @@ export default {
         editTitle: 'Редагувати номер телефону',
         dummy: 'Телефонні номери ще не додано',
       },
+      messaging: {
+        gateway: 'Шлюз',
+        provider: 'Провайдер',
+        dummy: 'Поки ще було текстових діалогів',
+        messengers: {
+          [ChatGatewayProvider.TELEGRAM_BOT]: 'Telegram Бот',
+          [ChatGatewayProvider.TELEGRAM_APP]: 'Telegram Застосунок',
+          [ChatGatewayProvider.MESSENGER]: 'Meta',
+          [ChatGatewayProvider.VIBER]: 'Viber',
+          [ChatGatewayProvider.WEBCHAT]: 'Web chat',
+          [ChatGatewayProvider.INFOBIP]: 'Infobip',
+        },
+      },
     },
     attributes: 'Атрибут | Атрибути',
   },

src/modules/contacts/components/opened-contact-communications.vue

@@ -28,6 +28,7 @@ import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import TheEmails from '../modules/emails/components/the-emails.vue';
 import ThePhones from '../modules/phones/components/the-phones.vue';
+import TheMessaging from '../modules/messaging/components/the-messaging.vue';
 
 const access = inject('access');
 
@@ -40,6 +41,7 @@ const props = defineProps({
 
 const emailsNamespace = `${props.namespace}/emails`;
 const phonesNamespace = `${props.namespace}/phones`;
+const messagingNamespace = `${props.namespace}/messaging`;
 
 const store = useStore();
 const { t } = useI18n();
@@ -53,6 +55,14 @@ const tabs = computed(() => [
     icon: 'call',
     channel: 'number', // must be same as comm popup channel
   },
+  {
+    value: 'messaging',
+    label: t('vocabulary.messaging'),
+    component: TheMessaging,
+    namespace: messagingNamespace,
+    icon: 'chat',
+    channel: 'messaging', // must be same as comm popup channel
+  },
   {
     value: 'emails',
     label: t('vocabulary.emails', 2),

src/modules/contacts/modules/messaging/api/MessagingAPI.js

@@ -0,0 +1,54 @@
+import { getDefaultGetParams } from '@webitel/ui-sdk/src/api/defaults';
+import applyTransform, {
+  merge, notify,
+  sanitize, snakeToCamel, starToSearch
+} from '@webitel/ui-sdk/src/api/transformers';
+import { IMClientsApiFactory } from 'webitel-sdk';
+import getDefaultGetListResponse
+  from '../../../../../app/api/defaults/getDefaultGetListResponse';
+import configuration from '../../../../../app/api/openAPIConfig';
+import instance from '../../../../../app/api/instance';
+
+const service = new IMClientsApiFactory(configuration, '', instance);
+
+const getList = async (params) => {
+  const {
+    parentId,
+    page,
+    size,
+    q,
+    sort,
+    fields,
+    id,
+  } = applyTransform(params, [
+    merge(getDefaultGetParams()),
+    starToSearch('q'),
+  ]);
+  try {
+    const response = await service.listIMClients(
+      parentId,
+      page,
+      size,
+      q,
+      sort,
+      fields,
+      id,
+    );
+    const { data, next } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return {
+      items: applyTransform(data, []),
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+export default {
+  getList,
+};