From 3c107e10701fa1276943231a372d40dbee080655 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Fri, 5 Jan 2024 12:12:31 +0200
Subject: [PATCH 01/12] hotfix: add prop darkMode in wt-dummy[WTEL-4111]

---
 src/modules/contacts/components/the-contacts.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/contacts/components/the-contacts.vue b/src/modules/contacts/components/the-contacts.vue
index 2024235..101f396 100644
--- a/src/modules/contacts/components/the-contacts.vue
+++ b/src/modules/contacts/components/the-contacts.vue
@@ -34,6 +34,7 @@
         v-if="!isLoading && !dataList.length"
         :src="dummy.src"
         :text="dummy.text"
+        :dark-mode="darkMode"
       ></wt-dummy>
 
       <delete-confirmation-popup

From 4f14999a7a053895323789665833b650f0cbf14e Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Sat, 27 Jan 2024 00:00:21 +0200
Subject: [PATCH 02/12] fix: added more styles for contact communication header
 and small refactoring in contact communications tab [WTEL-3883]

---
 .../opened-contact-communications.vue         | 38 ++++++++--------
 .../css/contact-communication-tab.scss        |  8 ++++
 .../modules/emails/components/the-emails.vue  | 36 ++++++++++++---
 .../modules/phones/components/the-phones.vue  | 45 ++++++++++++++-----
 4 files changed, 91 insertions(+), 36 deletions(-)

diff --git a/src/modules/contacts/components/opened-contact-communications.vue b/src/modules/contacts/components/opened-contact-communications.vue
index 42da473..cee2d62 100644
--- a/src/modules/contacts/components/opened-contact-communications.vue
+++ b/src/modules/contacts/components/opened-contact-communications.vue
@@ -1,12 +1,12 @@
 <template>
   <section class="opened-contact-communications">
     <header class="opened-contact-communications-header">
-      <add-communication-popup
-        v-if="isCommunicationPopup"
-        :initial-channel="currentTab.channel"
-        :callback="saveCommunication"
-        @close="isCommunicationPopup = false"
-      ></add-communication-popup>
+<!--      <add-communication-popup-->
+<!--        v-if="isCommunicationPopup"-->
+<!--        :initial-channel="currentTab.channel"-->
+<!--        :callback="saveCommunication"-->
+<!--        @close="isCommunicationPopup = false"-->
+<!--      ></add-communication-popup>-->
       <wt-button
         v-for="(tab) of tabs"
         :key="tab.value"
@@ -20,11 +20,11 @@
         ></wt-icon>
         {{ tab.label }}
       </wt-button>
-      <wt-button
-        :disabled="!access.hasRbacEditAccess"
-        @click="isCommunicationPopup = true"
-      >{{ t('reusable.add') }}
-      </wt-button>
+<!--      <wt-button-->
+<!--        :disabled="!access.hasRbacEditAccess"-->
+<!--        @click="isCommunicationPopup = true"-->
+<!--      >{{ t('reusable.add') }}-->
+<!--      </wt-button>-->
     </header>
     <component
       :is="currentTab.component"
@@ -39,7 +39,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 AddCommunicationPopup from './opened-contact-communication-popup.vue';
+// import AddCommunicationPopup from './opened-contact-communication-popup.vue';
 
 const access = inject('access');
 
@@ -77,14 +77,14 @@ const tabs = computed(() => [
 
 const currentTab = ref(tabs.value[0]);
 
-const isCommunicationPopup = ref(false);
+// const isCommunicationPopup = ref(false);
 
-function saveCommunication({ channel, type, destination }) {
-  const itemInstance = { type, [channel]: destination };
-  if (channel === 'email') return store.dispatch(`${emailsNamespace}/table/ADD_EMAIL`, { itemInstance });
-  if (channel === 'number') return store.dispatch(`${phonesNamespace}/table/ADD_PHONE`, { itemInstance });
-  throw TypeError(`Unknown communication channel: ${channel}`);
-}
+// function saveCommunication({ channel, type, destination }) {
+//   const itemInstance = { type, [channel]: destination };
+//   if (channel === 'email') return store.dispatch(`${emailsNamespace}/table/ADD_EMAIL`, { itemInstance });
+//   if (channel === 'number') return store.dispatch(`${phonesNamespace}/table/ADD_PHONE`, { itemInstance });
+//   throw TypeError(`Unknown communication channel: ${channel}`);
+// }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/contacts/modules/_shared/css/contact-communication-tab.scss b/src/modules/contacts/modules/_shared/css/contact-communication-tab.scss
index c95705f..f46ed29 100644
--- a/src/modules/contacts/modules/_shared/css/contact-communication-tab.scss
+++ b/src/modules/contacts/modules/_shared/css/contact-communication-tab.scss
@@ -1,6 +1,14 @@
 .contact-communication-tab {
   flex-grow: 1;
   display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  &-header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 var(--spacing-xs);
+  }
 
   .set-primary-btn {
     opacity: 0;
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index 8a7ec46..bf8cbb1 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -1,18 +1,33 @@
 <template>
   <div class="contact-communication-tab emails">
+    <add-communication-popup
+      v-if="isCommunicationPopup"
+      initial-channel="email"
+      :callback="saveEmail"
+      @close="isCommunicationPopup = false"
+    />
+
     <communication-popup
       v-if="editedItem"
       :edited-instance="editedItem"
       :callback="updateEmail"
       @close="editedItem = null"
-    ></communication-popup>
+    />
 
     <delete-confirmation-popup
       v-if="isConfirmationPopup"
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
-    ></delete-confirmation-popup>
+    />
+
+    <header class="contact-communication-tab-header">
+      <wt-icon-action
+        :disabled="!access.hasRbacEditAccess"
+        action="add"
+        @click="isCommunicationPopup = true"
+      />
+    </header>
 
     <wt-loader v-show="isLoading"></wt-loader>
 
@@ -35,14 +50,14 @@
             v-if="item.primary"
             icon="tick"
             color="success"
-          ></wt-icon>
+          />
           <wt-icon-btn
             v-else
             :disabled="!access.hasRbacEditAccess"
             class="set-primary-btn"
             icon="tick"
             @click="setAsPrimary({ item, index })"
-          ></wt-icon-btn>
+          />
         </template>
         <template v-slot:type="{ item }">
           {{ item.type.name }}
@@ -52,7 +67,7 @@
             :disabled="!access.hasRbacEditAccess"
             action="edit"
             @click="editedItem = item"
-          ></wt-icon-action>
+          />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="delete"
@@ -60,7 +75,7 @@
               deleted: item,
               callback: () => deleteData(item),
             })"
-          ></wt-icon-action>
+          />
         </template>
       </wt-table>
     </div>
@@ -80,7 +95,7 @@ import {
 import { useStore } from 'vuex';
 import dummyLight from '../assets/email-dummy-light.svg';
 import dummyDark from '../assets/email-dummy-dark.svg';
-import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
+import AddCommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
 
 const access = inject('access');
 
@@ -120,6 +135,8 @@ const {
 
 const editedItem = ref(null);
 
+const isCommunicationPopup = ref(false);
+
 const showDummy = computed(() => !dataList.value.length);
 const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
 
@@ -127,6 +144,11 @@ function setAsPrimary({ item, index }) {
   return store.dispatch(`${namespace}/SET_AS_PRIMARY`, { item, index });
 }
 
+function saveEmail({ type, destination }) {
+  const itemInstance = { type, email: destination };
+  return store.dispatch(`${namespace}/ADD_EMAIL`, { itemInstance });
+}
+
 function updateEmail({ channel, destination, ...rest }) {
   const itemInstance = { ...rest, [channel]: destination };
   return store.dispatch(`${namespace}/UPDATE_EMAIL`, {
diff --git a/src/modules/contacts/modules/phones/components/the-phones.vue b/src/modules/contacts/modules/phones/components/the-phones.vue
index 4ac8ae9..8e0154c 100644
--- a/src/modules/contacts/modules/phones/components/the-phones.vue
+++ b/src/modules/contacts/modules/phones/components/the-phones.vue
@@ -1,28 +1,46 @@
 <template>
   <div class="contact-communication-tab phones">
+    <add-communication-popup
+      v-if="isCommunicationPopup"
+      initial-channel="number"
+      :callback="savePhone"
+      @close="isCommunicationPopup = false"
+    />
+
     <communication-popup
       v-if="editedItem"
       :edited-instance="editedItem"
       :callback="updatePhone"
       @close="editedItem = null"
-    ></communication-popup>
+    />
 
     <delete-confirmation-popup
       v-if="isConfirmationPopup"
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
-    ></delete-confirmation-popup>
+    />
+
+    <header class="contact-communication-tab-header">
+      <wt-icon-action
+        :disabled="!access.hasRbacEditAccess"
+        action="add"
+        @click="isCommunicationPopup = true"
+      />
+    </header>
 
-    <wt-loader v-show="isLoading"></wt-loader>
+    <wt-loader v-show="isLoading" />
 
     <wt-dummy
       v-if="!isLoading && showDummy"
       :src="darkMode ? dummyDark : dummyLight"
       :text="t('contacts.communications.phones.dummy')"
-    ></wt-dummy>
+    />
 
-    <div v-show="!isLoading && !showDummy" class="table-wrapper">
+    <div
+      v-show="!isLoading && !showDummy"
+      class="table-wrapper"
+    >
       <wt-table
         :headers="headers"
         :data="dataList"
@@ -35,14 +53,14 @@
             v-if="item.primary"
             icon="tick"
             color="success"
-          ></wt-icon>
+          />
           <wt-icon-btn
             v-else
             :disabled="!access.hasRbacEditAccess"
             class="set-primary-btn"
             icon="tick"
             @click="setAsPrimary({ item, index })"
-          ></wt-icon-btn>
+          />
         </template>
         <template v-slot:type="{ item }">
           {{ item.type.name }}
@@ -52,7 +70,7 @@
             :disabled="!access.hasRbacEditAccess"
             action="edit"
             @click="editedItem = item"
-          ></wt-icon-action>
+          />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="delete"
@@ -60,7 +78,7 @@
               deleted: item,
               callback: () => deleteData(item),
             })"
-          ></wt-icon-action>
+          />
         </template>
       </wt-table>
     </div>
@@ -80,7 +98,7 @@ import {
 import { useStore } from 'vuex';
 import dummyLight from '../assets/phone-dummy-light.svg';
 import dummyDark from '../assets/phone-dummy-dark.svg';
-import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
+import AddCommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
 
 const access = inject('access');
 
@@ -120,6 +138,8 @@ const {
 
 const editedItem = ref(null);
 
+const isCommunicationPopup = ref(false);
+
 const showDummy = computed(() => !dataList.value.length);
 const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
 
@@ -127,6 +147,11 @@ function setAsPrimary({ item, index }) {
   return store.dispatch(`${namespace}/SET_AS_PRIMARY`, { item, index });
 }
 
+function savePhone({ type, destination }) {
+  const itemInstance = { type, number: destination };
+  return store.dispatch(`${namespace}/ADD_PHONE`, { itemInstance });
+}
+
 function updatePhone({ channel, destination, ...rest }) {
   const itemInstance = { ...rest, [channel]: destination };
   return store.dispatch(`${namespace}/UPDATE_PHONE`, {

From 83c9c087c20bbaa8345c997ba58c18662b0a5847 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Tue, 30 Jan 2024 14:24:10 +0200
Subject: [PATCH 03/12] fix: refactoring comminacation popup in progress
 [WTEL-3883]

---
 .../emails/components/opened-emails-popup.vue | 179 ++++++++++++++++++
 .../modules/emails/components/the-emails.vue  |  14 +-
 2 files changed, 186 insertions(+), 7 deletions(-)
 create mode 100644 src/modules/contacts/modules/emails/components/opened-emails-popup.vue

diff --git a/src/modules/contacts/modules/emails/components/opened-emails-popup.vue b/src/modules/contacts/modules/emails/components/opened-emails-popup.vue
new file mode 100644
index 0000000..e01f38b
--- /dev/null
+++ b/src/modules/contacts/modules/emails/components/opened-emails-popup.vue
@@ -0,0 +1,179 @@
+<template>
+  <wt-popup
+    class="opened-contact-add-communication-popup"
+    width="480"
+    overflow
+    @close="close"
+  >
+    <template v-slot:header>
+      {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
+      {{
+        t('contacts.communications.communications', 1)
+          .toLowerCase()
+      }}
+    </template>
+    <template v-slot:main>
+      <form
+        class="opened-contact-add-communication-popup-form"
+      >
+        <wt-select
+          :value="channel"
+          :options="channelOptions"
+          :disabled="mode === 'update'"
+          :v="v$.draft.channel"
+          :label="t('contacts.communications.channel')"
+          :clearable="false"
+          track-by="value"
+          required
+          @input="draft.channel = $event.value"
+        ></wt-select>
+        <wt-select
+          ref="TypeSelect"
+          :value="draft.type"
+          :v="v$.draft.type"
+          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: channel.filterField })"
+          :clearable="false"
+          :label="t('objects.communicationType', 1)"
+          required
+          @input="draft.type = $event"
+        ></wt-select>
+        <wt-input
+          v-model="draft.destination"
+          :v="v$.draft.destination"
+          :clearable="false"
+          :label="t('contacts.communications.destination')"
+          required
+        ></wt-input>
+      </form>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        :disabled="v$.$invalid"
+        :loading="isLoading"
+        @click="save"
+      >{{ t('reusable.save') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >{{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+/*
+Although this popup actually represents emails, phones or messaging item card,
+I decided not to provide these modules with "card" store and features because
+I think it would be too overcomplicated because these 3 modules have shared communications
+popup (by UI design, "Add" button is higher on component hierarchy than entity table itself)
+ */
+import { computed, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
+import { EngineCommunicationChannels } from 'webitel-sdk';
+import CommunicationTypesAPI from '../api/CommunicationTypesAPI';
+
+const props = defineProps({
+  editedInstance: {
+    type: Object,
+  },
+  callback: {
+    type: Function,
+    required: true,
+  },
+  // initialChannel: {
+  //   type: String,
+  //   default: 'number',
+  // },
+});
+
+const emit = defineEmits([
+  'close',
+]);
+
+const { t } = useI18n();
+
+const channelOptions = [
+  // {
+  //   value: 'number', // should be same as backend field for destination
+  //   locale: ['vocabulary.phones', 1],
+  //   filterField: EngineCommunicationChannels.Phone,
+  // },
+  {
+    value: 'email', // should be same as backend field for destination
+    locale: ['vocabulary.emails', 1],
+    filterField: EngineCommunicationChannels.Email,
+  },
+  // {
+  //   value: 'messaging',
+  //   locale: 'vocabulary.messaging',
+  //   filterField: EngineCommunicationChannels.Messaging,
+  // },
+];
+
+const getDefaultDraft = () => ({
+  // channel: channelOptions.find(({ value }) => value === props.initialChannel).value,
+  type: {},
+  destination: '',
+});
+
+const draft = reactive(getDefaultDraft());
+const isLoading = ref(false);
+const TypeSelect = ref(null);
+
+const v$ = useVuelidate(computed(() => {
+  const destination = { required };
+  if (draft.channel === 'email') destination.email = email;
+  return {
+    draft: {
+      channel: { required },
+      type: { required },
+      destination,
+    },
+  };
+}), { draft }, { $autoDirty: true });
+
+v$.value.$touch();
+
+const mode = computed(() => (props.editedInstance ? 'update' : 'create'));
+
+const channel = computed(() => channelOptions.find(({ value }) => draft.channel === value));
+
+function initDraft() {
+  draft.channel = channelOptions.find(({ value }) => props.editedInstance[value]).value;
+  draft.destination = props.editedInstance[draft.channel];
+  draft.type = props.editedInstance.type;
+}
+
+if (mode.value === 'update') initDraft();
+
+function close() {
+  emit('close');
+}
+
+async function save() {
+  try {
+    isLoading.value = true;
+    await props.callback(draft);
+    close();
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+// watch(channel, () => {
+//   draft.type = {}; // reset selected type, because it has another channel
+//   TypeSelect.value.fetchOptions(); // load types by newly changed channel filter
+// });
+</script>
+
+<style lang="scss" scoped>
+.opened-contact-add-communication-popup-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+</style>
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index bf8cbb1..26f7b7d 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="contact-communication-tab emails">
-    <add-communication-popup
-      v-if="isCommunicationPopup"
-      initial-channel="email"
-      :callback="saveEmail"
-      @close="isCommunicationPopup = false"
-    />
+<!--    <add-communication-popup-->
+<!--      v-if="isCommunicationPopup"-->
+<!--      initial-channel="email"-->
+<!--      :callback="saveEmail"-->
+<!--      @close="isCommunicationPopup = false"-->
+<!--    />-->
 
     <communication-popup
       v-if="editedItem"
@@ -95,7 +95,7 @@ import {
 import { useStore } from 'vuex';
 import dummyLight from '../assets/email-dummy-light.svg';
 import dummyDark from '../assets/email-dummy-dark.svg';
-import AddCommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
+import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
 
 const access = inject('access');
 

From 88e5d81ec934fac61788a2f75e9a8a85142201af Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Thu, 8 Feb 2024 02:00:59 +0200
Subject: [PATCH 04/12] fix: refactoring contact communication popup in
 progress [WTEL-3883]

---
 .../opened-contact-communication-popup.vue    | 319 +++++++++++++-----
 .../emails/components/opened-emails-popup.vue | 179 ----------
 .../modules/emails/components/the-emails.vue  |  34 +-
 3 files changed, 265 insertions(+), 267 deletions(-)
 delete mode 100644 src/modules/contacts/modules/emails/components/opened-emails-popup.vue

diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index 219a1ef..5e3092c 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -1,3 +1,185 @@
+<!--<template>-->
+<!--  <wt-popup-->
+<!--    class="opened-contact-communication-popup"-->
+<!--    width="480"-->
+<!--    overflow-->
+<!--    @close="close"-->
+<!--  >-->
+<!--    <template #header>-->
+<!--&lt;!&ndash;      {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}&ndash;&gt;-->
+<!--      {{-->
+<!--        t('contacts.communications.communications', 1)-->
+<!--          .toLowerCase()-->
+<!--      }}-->
+<!--    </template>-->
+<!--    <template #main>-->
+<!--      <form-->
+<!--        class="opened-contact-communication-popup-form"-->
+<!--      >-->
+<!--&lt;!&ndash;        <wt-select&ndash;&gt;-->
+<!--&lt;!&ndash;          :value="channel"&ndash;&gt;-->
+<!--&lt;!&ndash;          :options="channelOptions"&ndash;&gt;-->
+<!--&lt;!&ndash;          :disabled="mode === 'update'"&ndash;&gt;-->
+<!--&lt;!&ndash;          :v="v$.draft.channel"&ndash;&gt;-->
+<!--&lt;!&ndash;          :label="t('contacts.communications.channel')"&ndash;&gt;-->
+<!--&lt;!&ndash;          :clearable="false"&ndash;&gt;-->
+<!--&lt;!&ndash;          track-by="value"&ndash;&gt;-->
+<!--&lt;!&ndash;          required&ndash;&gt;-->
+<!--&lt;!&ndash;          @input="draft.channel = $event.value"&ndash;&gt;-->
+<!--&lt;!&ndash;        />&ndash;&gt;-->
+<!--        <wt-select-->
+<!--          ref="TypeSelect"-->
+<!--          :value="draft.type"-->
+<!--          :v="v$.draft.type"-->
+<!--          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: channel.filterField })"-->
+<!--          :clearable="false"-->
+<!--          :label="t('objects.communicationType', 1)"-->
+<!--          required-->
+<!--          @input="draft.type = $event"-->
+<!--        />-->
+<!--        <wt-input-->
+<!--          v-model="draft.destination"-->
+<!--          :v="v$.draft.destination"-->
+<!--          :clearable="false"-->
+<!--          :label="t('contacts.communications.destination')"-->
+<!--          required-->
+<!--        />-->
+<!--      </form>-->
+<!--    </template>-->
+<!--    <template #actions>-->
+<!--      <wt-button-->
+<!--        :disabled="v$.$invalid"-->
+<!--        :loading="isLoading"-->
+<!--        @click="save"-->
+<!--      >-->
+<!--        {{ t('reusable.save') }}-->
+<!--      </wt-button>-->
+<!--      <wt-button-->
+<!--        color="secondary"-->
+<!--        @click="close"-->
+<!--      >-->
+<!--        {{ t('reusable.cancel') }}-->
+<!--      </wt-button>-->
+<!--    </template>-->
+<!--  </wt-popup>-->
+<!--</template>-->
+
+<!--<script setup>-->
+<!--/*-->
+<!--Although this popup actually represents emails, phones or messaging item card,-->
+<!--I decided not to provide these modules with "card" store and features because-->
+<!--I think it would be too overcomplicated because these 3 modules have shared communications-->
+<!--popup (by UI design, "Add" button is higher on component hierarchy than entity table itself)-->
+<!-- */-->
+<!--import { computed, reactive, ref, watch } from 'vue';-->
+<!--import { useI18n } from 'vue-i18n';-->
+<!--import { useVuelidate } from '@vuelidate/core';-->
+<!--import { required, email } from '@vuelidate/validators';-->
+<!--import { EngineCommunicationChannels } from 'webitel-sdk';-->
+<!--import CommunicationTypesAPI from '../api/CommunicationTypesAPI';-->
+
+<!--const props = defineProps({-->
+<!--  editedInstance: {-->
+<!--    type: Object,-->
+<!--  },-->
+<!--  callback: {-->
+<!--    type: Function,-->
+<!--    required: true,-->
+<!--  },-->
+<!--  initialChannel: {-->
+<!--    type: String,-->
+<!--    default: 'number',-->
+<!--  },-->
+<!--});-->
+
+<!--const emit = defineEmits([-->
+<!--  'close',-->
+<!--]);-->
+
+<!--const { t } = useI18n();-->
+
+<!--const channelOptions = [-->
+<!--  {-->
+<!--    value: 'number', // should be same as backend field for destination-->
+<!--    locale: ['vocabulary.phones', 1],-->
+<!--    filterField: EngineCommunicationChannels.Phone,-->
+<!--  },-->
+<!--  {-->
+<!--    value: 'email', // should be same as backend field for destination-->
+<!--    locale: ['vocabulary.emails', 1],-->
+<!--    filterField: EngineCommunicationChannels.Email,-->
+<!--  },-->
+<!--  // {-->
+<!--  //   value: 'messaging',-->
+<!--  //   locale: 'vocabulary.messaging',-->
+<!--  //   filterField: EngineCommunicationChannels.Messaging,-->
+<!--  // },-->
+<!--];-->
+
+<!--const getDefaultDraft = () => ({-->
+<!--  channel: channelOptions.find(({ value }) => value === props.initialChannel).value,-->
+<!--  type: {},-->
+<!--  destination: '',-->
+<!--});-->
+
+<!--const draft = reactive(getDefaultDraft());-->
+<!--const isLoading = ref(false);-->
+<!--const TypeSelect = ref(null);-->
+
+<!--const v$ = useVuelidate(computed(() => {-->
+<!--  const destination = { required };-->
+<!--  if (draft.channel === 'email') destination.email = email;-->
+<!--  return {-->
+<!--    draft: {-->
+<!--      channel: { required },-->
+<!--      type: { required },-->
+<!--      destination,-->
+<!--    },-->
+<!--  };-->
+<!--}), { draft }, { $autoDirty: true });-->
+
+<!--v$.value.$touch();-->
+
+<!--// const mode = computed(() => (props.editedInstance ? 'update' : 'create'));-->
+
+<!--const channel = computed(() => channelOptions.find(({ value }) => draft.channel === value));-->
+
+<!--function initDraft() {-->
+<!--  draft.channel = channelOptions.find(({ value }) => props.editedInstance[value]).value;-->
+<!--  draft.destination = props.editedInstance[draft.channel];-->
+<!--  draft.type = props.editedInstance.type;-->
+<!--}-->
+
+<!--if (mode.value === 'update') initDraft();-->
+
+<!--function close() {-->
+<!--  emit('close');-->
+<!--}-->
+
+<!--async function save() {-->
+<!--  try {-->
+<!--    isLoading.value = true;-->
+<!--    await props.callback(draft);-->
+<!--    close();-->
+<!--  } finally {-->
+<!--    isLoading.value = false;-->
+<!--  }-->
+<!--}-->
+
+<!--watch(channel, () => {-->
+<!--  draft.type = {}; // reset selected type, because it has another channel-->
+<!--  TypeSelect.value.fetchOptions(); // load types by newly changed channel filter-->
+<!--});-->
+<!--</script>-->
+
+<!--<style lang="scss" scoped>-->
+<!--.opened-contact-communication-popup-form {-->
+<!--  display: flex;-->
+<!--  flex-direction: column;-->
+<!--  gap: var(&#45;&#45;spacing-xs);-->
+<!--}-->
+<!--</style>-->
+
 <template>
   <wt-popup
     class="opened-contact-add-communication-popup"
@@ -6,32 +188,22 @@
     @close="close"
   >
     <template #header>
-      {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
-      {{
-        t('contacts.communications.communications', 1)
-          .toLowerCase()
+      {{ item ? t('reusable.edit') : t('reusable.add') }}
+      {{ locale ||
+        t('contacts.communications.communications', 1).toLowerCase()
       }}
     </template>
     <template #main>
       <form
-        class="opened-contact-add-communication-popup-form"
+        class="opened-contact-communication-popup-form"
       >
-        <wt-select
-          :value="channel"
-          :options="channelOptions"
-          :disabled="mode === 'update'"
-          :v="v$.draft.channel"
-          :label="t('contacts.communications.channel')"
-          :clearable="false"
-          track-by="value"
-          required
-          @input="draft.channel = $event.value"
-        />
+        {{ draft.channel }}
+        {{ {...params, channel: draft.channel } }}
         <wt-select
           ref="TypeSelect"
           :value="draft.type"
           :v="v$.draft.type"
-          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: channel.filterField })"
+          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: props.filterField })"
           :clearable="false"
           :label="t('objects.communicationType', 1)"
           required
@@ -65,67 +237,60 @@
 </template>
 
 <script setup>
-/*
-Although this popup actually represents emails, phones or messaging item card,
-I decided not to provide these modules with "card" store and features because
-I think it would be too overcomplicated because these 3 modules have shared communications
-popup (by UI design, "Add" button is higher on component hierarchy than entity table itself)
- */
-import { computed, reactive, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, onMounted, ref, watch, reactive } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email } from '@vuelidate/validators';
-import { EngineCommunicationChannels } from 'webitel-sdk';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import CommunicationTypesAPI from '../api/CommunicationTypesAPI';
 
+const { t } = useI18n();
+const store = useStore();
+
 const props = defineProps({
-  editedInstance: {
-    type: Object,
+  item: {
+    // if item is passed, that's an edit
+    type: [Object, null],
   },
-  callback: {
-    type: Function,
+  channel: {
+    type: String,
+    default: 'number',
+  },
+  filterField: {
+    type: String,
     required: true,
   },
-  initialChannel: {
+  label: {
     type: String,
-    default: 'number',
+  },
+  callback: {
+    type: Function,
+    required: true,
   },
 });
 
-const emit = defineEmits([
-  'close',
-]);
+const emit = defineEmits(['saved', 'close']);
 
-const { t } = useI18n();
-
-const channelOptions = [
-  {
-    value: 'number', // should be same as backend field for destination
-    locale: ['vocabulary.phones', 1],
-    filterField: EngineCommunicationChannels.Phone,
-  },
-  {
-    value: 'email', // should be same as backend field for destination
-    locale: ['vocabulary.emails', 1],
-    filterField: EngineCommunicationChannels.Email,
-  },
-  // {
-  //   value: 'messaging',
-  //   locale: 'vocabulary.messaging',
-  //   filterField: EngineCommunicationChannels.Messaging,
-  // },
-];
 
 const getDefaultDraft = () => ({
-  channel: channelOptions.find(({ value }) => value === props.initialChannel).value,
+  channel: props.channel,
   type: {},
   destination: '',
 });
 
-const draft = reactive(getDefaultDraft());
+// const draft = reactive(getDefaultDraft());
 const isLoading = ref(false);
+const isSaving = ref(false);
 const TypeSelect = ref(null);
 
+const draft = computed(() => {
+  return props.item || getDefaultDraft();
+});
+
+// const channel = computed(() => {
+//   return props.item.channel || draft.channel;
+// });
+
 const v$ = useVuelidate(computed(() => {
   const destination = { required };
   if (draft.channel === 'email') destination.email = email;
@@ -138,42 +303,44 @@ const v$ = useVuelidate(computed(() => {
   };
 }), { draft }, { $autoDirty: true });
 
-v$.value.$touch();
 
-const mode = computed(() => (props.editedInstance ? 'update' : 'create'));
 
-const channel = computed(() => channelOptions.find(({ value }) => draft.channel === value));
+// v$.value.$touch();
 
-function initDraft() {
-  draft.channel = channelOptions.find(({ value }) => props.editedInstance[value]).value;
-  draft.destination = props.editedInstance[draft.channel];
-  draft.type = props.editedInstance.type;
-}
 
-if (mode.value === 'update') initDraft();
 
-function close() {
-  emit('close');
-}
+// function close() {
+//   emit('close');
+// }
 
 async function save() {
+  let newContact = '';
   try {
-    isLoading.value = true;
-    await props.callback(draft);
+    isSaving.value = false;
+    // if (props.id) {
+    //   await ContactsAPI.update({ itemInstance: { ...draft.value, id: props.id } });
+    // } else {
+    //   newContact = await ContactsAPI.add({ itemInstance: draft.value });
+    // }
+    // emit('saved', props.id || newContact.id); //залишити
     close();
   } finally {
-    isLoading.value = false;
+    isSaving.value = false;
   }
 }
 
-watch(channel, () => {
-  draft.type = {}; // reset selected type, because it has another channel
-  TypeSelect.value.fetchOptions(); // load types by newly changed channel filter
-});
+function close() {
+  emit('close');
+}
+
+// function setDefaultDraft() {
+//   draft.value = getDefaultDraft;
+// }
+
 </script>
 
 <style lang="scss" scoped>
-.opened-contact-add-communication-popup-form {
+.opened-contact-communication-popup-form {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
diff --git a/src/modules/contacts/modules/emails/components/opened-emails-popup.vue b/src/modules/contacts/modules/emails/components/opened-emails-popup.vue
deleted file mode 100644
index e01f38b..0000000
--- a/src/modules/contacts/modules/emails/components/opened-emails-popup.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <wt-popup
-    class="opened-contact-add-communication-popup"
-    width="480"
-    overflow
-    @close="close"
-  >
-    <template v-slot:header>
-      {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}
-      {{
-        t('contacts.communications.communications', 1)
-          .toLowerCase()
-      }}
-    </template>
-    <template v-slot:main>
-      <form
-        class="opened-contact-add-communication-popup-form"
-      >
-        <wt-select
-          :value="channel"
-          :options="channelOptions"
-          :disabled="mode === 'update'"
-          :v="v$.draft.channel"
-          :label="t('contacts.communications.channel')"
-          :clearable="false"
-          track-by="value"
-          required
-          @input="draft.channel = $event.value"
-        ></wt-select>
-        <wt-select
-          ref="TypeSelect"
-          :value="draft.type"
-          :v="v$.draft.type"
-          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: channel.filterField })"
-          :clearable="false"
-          :label="t('objects.communicationType', 1)"
-          required
-          @input="draft.type = $event"
-        ></wt-select>
-        <wt-input
-          v-model="draft.destination"
-          :v="v$.draft.destination"
-          :clearable="false"
-          :label="t('contacts.communications.destination')"
-          required
-        ></wt-input>
-      </form>
-    </template>
-    <template v-slot:actions>
-      <wt-button
-        :disabled="v$.$invalid"
-        :loading="isLoading"
-        @click="save"
-      >{{ t('reusable.save') }}
-      </wt-button>
-      <wt-button
-        color="secondary"
-        @click="close"
-      >{{ t('reusable.cancel') }}
-      </wt-button>
-    </template>
-  </wt-popup>
-</template>
-
-<script setup>
-/*
-Although this popup actually represents emails, phones or messaging item card,
-I decided not to provide these modules with "card" store and features because
-I think it would be too overcomplicated because these 3 modules have shared communications
-popup (by UI design, "Add" button is higher on component hierarchy than entity table itself)
- */
-import { computed, reactive, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, email } from '@vuelidate/validators';
-import { EngineCommunicationChannels } from 'webitel-sdk';
-import CommunicationTypesAPI from '../api/CommunicationTypesAPI';
-
-const props = defineProps({
-  editedInstance: {
-    type: Object,
-  },
-  callback: {
-    type: Function,
-    required: true,
-  },
-  // initialChannel: {
-  //   type: String,
-  //   default: 'number',
-  // },
-});
-
-const emit = defineEmits([
-  'close',
-]);
-
-const { t } = useI18n();
-
-const channelOptions = [
-  // {
-  //   value: 'number', // should be same as backend field for destination
-  //   locale: ['vocabulary.phones', 1],
-  //   filterField: EngineCommunicationChannels.Phone,
-  // },
-  {
-    value: 'email', // should be same as backend field for destination
-    locale: ['vocabulary.emails', 1],
-    filterField: EngineCommunicationChannels.Email,
-  },
-  // {
-  //   value: 'messaging',
-  //   locale: 'vocabulary.messaging',
-  //   filterField: EngineCommunicationChannels.Messaging,
-  // },
-];
-
-const getDefaultDraft = () => ({
-  // channel: channelOptions.find(({ value }) => value === props.initialChannel).value,
-  type: {},
-  destination: '',
-});
-
-const draft = reactive(getDefaultDraft());
-const isLoading = ref(false);
-const TypeSelect = ref(null);
-
-const v$ = useVuelidate(computed(() => {
-  const destination = { required };
-  if (draft.channel === 'email') destination.email = email;
-  return {
-    draft: {
-      channel: { required },
-      type: { required },
-      destination,
-    },
-  };
-}), { draft }, { $autoDirty: true });
-
-v$.value.$touch();
-
-const mode = computed(() => (props.editedInstance ? 'update' : 'create'));
-
-const channel = computed(() => channelOptions.find(({ value }) => draft.channel === value));
-
-function initDraft() {
-  draft.channel = channelOptions.find(({ value }) => props.editedInstance[value]).value;
-  draft.destination = props.editedInstance[draft.channel];
-  draft.type = props.editedInstance.type;
-}
-
-if (mode.value === 'update') initDraft();
-
-function close() {
-  emit('close');
-}
-
-async function save() {
-  try {
-    isLoading.value = true;
-    await props.callback(draft);
-    close();
-  } finally {
-    isLoading.value = false;
-  }
-}
-
-// watch(channel, () => {
-//   draft.type = {}; // reset selected type, because it has another channel
-//   TypeSelect.value.fetchOptions(); // load types by newly changed channel filter
-// });
-</script>
-
-<style lang="scss" scoped>
-.opened-contact-add-communication-popup-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-</style>
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index f65fedc..27bd0fe 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -8,10 +8,11 @@
 <!--    />-->
 
     <communication-popup
-      v-if="editedItem"
-      :edited-instance="editedItem"
-      :callback="updateEmail"
-      @close="editedItem = null"
+      v-if="isCommunicationPopup"
+      :item="editedItem"
+      :filter-field="EngineCommunicationChannels.Email"
+      :label="t('vocabulary.emails', 1)"
+      @close="closePopup"
     />
 
     <delete-confirmation-popup
@@ -69,7 +70,7 @@
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="edit"
-            @click="editedItem = item"
+            @click="edit(item)"
           />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
@@ -99,6 +100,7 @@ import { useStore } from 'vuex';
 import dummyLight from '../assets/email-dummy-light.svg';
 import dummyDark from '../assets/email-dummy-dark.svg';
 import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
+import { EngineCommunicationChannels } from 'webitel-sdk';
 
 const access = inject('access');
 
@@ -137,7 +139,6 @@ const {
 } = useDeleteConfirmationPopup();
 
 const editedItem = ref(null);
-
 const isCommunicationPopup = ref(false);
 
 const showDummy = computed(() => !dataList.value.length);
@@ -152,12 +153,21 @@ function saveEmail({ type, destination }) {
   return store.dispatch(`${namespace}/ADD_EMAIL`, { itemInstance });
 }
 
-function updateEmail({ channel, destination, ...rest }) {
-  const itemInstance = { ...rest, [channel]: destination };
-  return store.dispatch(`${namespace}/UPDATE_EMAIL`, {
-    itemInstance,
-    etag: editedItem.value.etag,
-  });
+function edit(item) {
+  editedItem.value = item;
+  isCommunicationPopup.value = true;
+}
+
+// function updateEmail({ channel, destination, ...rest }) {
+//   const itemInstance = { ...rest, [channel]: destination };
+//   return store.dispatch(`${namespace}/UPDATE_EMAIL`, {
+//     itemInstance,
+//     etag: editedItem.value.etag,
+//   });
+// }
+
+function closePopup() {
+  isCommunicationPopup.value = false;
 }
 </script>
 

From 22500be200c64ec08ae3b18ec421d44cb6e17216 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Thu, 8 Feb 2024 17:13:59 +0200
Subject: [PATCH 05/12] env changes

---
 src/app/router/index.js | 14 ++++----
 src/auth-test.vue       | 80 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 src/auth-test.vue

diff --git a/src/app/router/index.js b/src/app/router/index.js
index c53d641..dfb7721 100644
--- a/src/app/router/index.js
+++ b/src/app/router/index.js
@@ -1,7 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import CrmSections
   from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum';
-import Auth from '@webitel/ui-sdk/src/modules/Userinfo/components/the-auth.vue';
+// import Auth from '@webitel/ui-sdk/src/modules/Userinfo/components/the-auth.vue';
+import Auth from '../../auth-test.vue';
 import store from '../store';
 import TheCrmWorkspace from '../components/the-crm-workspace.vue';
 import TheContacts from '../../modules/contacts/components/the-contacts.vue';
@@ -49,11 +50,11 @@ const routes = [
     beforeEnter: checkAppAccess,
     children: [
       {
-      path: 'contacts',
-      name: CrmSections.CONTACTS,
-      component: TheContacts,
-      beforeEnter: checkRouteAccess,
-    },
+        path: 'contacts',
+        name: CrmSections.CONTACTS,
+        component: TheContacts,
+        beforeEnter: checkRouteAccess,
+      },
       {
         path: 'contacts/:id',
         name: `${CrmSections.CONTACTS}-edit`,
@@ -86,6 +87,7 @@ const routes = [
   },
 ];
 
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior() {
diff --git a/src/auth-test.vue b/src/auth-test.vue
new file mode 100644
index 0000000..af36666
--- /dev/null
+++ b/src/auth-test.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="auth-wrap">
+    <div
+      v-show="!isLoaded"
+      class="auth-loader"
+    >
+      <wt-loader />
+    </div>
+    <iframe
+      class="auth"
+      :src="authURL"
+      @load="isLoaded = true"
+    >
+      <p>Your browser does not support iframes.</p>
+    </iframe>
+  </div>
+</template>
+
+<script>
+import AuthAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/auth';
+
+const authURL = import.meta.env.VITE_AUTH_MODULE_URL;
+
+export default {
+  name: 'Auth',
+  props: {
+    namespace: {
+      type: String,
+      default: 'userinfo',
+    },
+  },
+  data: () => ({
+    authURL,
+    isLoaded: false,
+  }),
+
+  mounted() {
+    console.log('authURL:', authURL, 'process:', process, 'process.env.VUE_APP_AUTH_MODULE_URL:', process.env.VUE_APP_AUTH_MODULE_URL);
+    window.addEventListener('message', this.authMessageHandler, false);
+  },
+  unmounted() {
+    window.removeEventListener('message', this.authMessageHandler, false);
+  },
+
+  methods: {
+    openSession(payload) {
+      return this.$store.dispatch(`${this.namespace}/OPEN_SESSION`, payload);
+    },
+    async authMessageHandler(event) {
+      if (event.data.accessToken) {
+        // eslint-disable-next-line import/no-named-as-default-member
+        await AuthAPI.setToken(event.data.accessToken);
+        await this.openSession();
+        await this.$router.replace('/');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.auth-wrap {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .auth {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

From c8c86ae281645b3a107d68ecb3e9cba354f53bc7 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Mon, 12 Feb 2024 10:17:14 +0200
Subject: [PATCH 06/12] fix: refactoring contact communication popup and
 communacation tubs [WTEL-3883]

---
 src/app/locale/en/en.js                       |   2 +
 src/app/locale/ru/ru.js                       |   2 +
 src/app/locale/ua/ua.js                       |   2 +
 .../opened-contact-communication-popup.vue    | 260 +++---------------
 .../modules/emails/components/the-emails.vue  |  29 +-
 .../modules/phones/components/the-phones.vue  |  35 ++-
 6 files changed, 82 insertions(+), 248 deletions(-)

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index 7d17caa..a7e1d65 100644
--- a/src/app/locale/en/en.js
+++ b/src/app/locale/en/en.js
@@ -16,9 +16,11 @@ export default {
       destination: 'Destination',
       setAsPrimary: 'Set as primary',
       emails: {
+        title: 'the email',
         dummy: 'There are no email addresses yet',
       },
       phones: {
+        title: 'the phone number',
         dummy: 'There are no phone numbers yet',
       },
     },
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
index 2714e8c..9474a13 100644
--- a/src/app/locale/ru/ru.js
+++ b/src/app/locale/ru/ru.js
@@ -16,9 +16,11 @@ export default {
       destination: 'Назначение',
       setAsPrimary: 'Установить как основной',
       emails: {
+        title: 'Электронный адрес',
         dummy: 'Электронные адреса еще не добавлены',
       },
       phones: {
+        title: 'Номер телефона',
         dummy: 'Телефонные номера еще не добавлены',
       },
     },
diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
index f6a1787..b910063 100644
--- a/src/app/locale/ua/ua.js
+++ b/src/app/locale/ua/ua.js
@@ -16,9 +16,11 @@ export default {
       destination: 'Призначення',
       setAsPrimary: 'Встановити як основний',
       emails: {
+        title: 'Електронна адреса',
         dummy: 'Електронні адреси ще не додано',
       },
       phones: {
+        title: 'Номер телефону',
         dummy: 'Телефонні номери ще не додано',
       },
     },
diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index 5e3092c..85be549 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -1,185 +1,3 @@
-<!--<template>-->
-<!--  <wt-popup-->
-<!--    class="opened-contact-communication-popup"-->
-<!--    width="480"-->
-<!--    overflow-->
-<!--    @close="close"-->
-<!--  >-->
-<!--    <template #header>-->
-<!--&lt;!&ndash;      {{ mode === 'update' ? t('reusable.edit') : t('reusable.add') }}&ndash;&gt;-->
-<!--      {{-->
-<!--        t('contacts.communications.communications', 1)-->
-<!--          .toLowerCase()-->
-<!--      }}-->
-<!--    </template>-->
-<!--    <template #main>-->
-<!--      <form-->
-<!--        class="opened-contact-communication-popup-form"-->
-<!--      >-->
-<!--&lt;!&ndash;        <wt-select&ndash;&gt;-->
-<!--&lt;!&ndash;          :value="channel"&ndash;&gt;-->
-<!--&lt;!&ndash;          :options="channelOptions"&ndash;&gt;-->
-<!--&lt;!&ndash;          :disabled="mode === 'update'"&ndash;&gt;-->
-<!--&lt;!&ndash;          :v="v$.draft.channel"&ndash;&gt;-->
-<!--&lt;!&ndash;          :label="t('contacts.communications.channel')"&ndash;&gt;-->
-<!--&lt;!&ndash;          :clearable="false"&ndash;&gt;-->
-<!--&lt;!&ndash;          track-by="value"&ndash;&gt;-->
-<!--&lt;!&ndash;          required&ndash;&gt;-->
-<!--&lt;!&ndash;          @input="draft.channel = $event.value"&ndash;&gt;-->
-<!--&lt;!&ndash;        />&ndash;&gt;-->
-<!--        <wt-select-->
-<!--          ref="TypeSelect"-->
-<!--          :value="draft.type"-->
-<!--          :v="v$.draft.type"-->
-<!--          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: channel.filterField })"-->
-<!--          :clearable="false"-->
-<!--          :label="t('objects.communicationType', 1)"-->
-<!--          required-->
-<!--          @input="draft.type = $event"-->
-<!--        />-->
-<!--        <wt-input-->
-<!--          v-model="draft.destination"-->
-<!--          :v="v$.draft.destination"-->
-<!--          :clearable="false"-->
-<!--          :label="t('contacts.communications.destination')"-->
-<!--          required-->
-<!--        />-->
-<!--      </form>-->
-<!--    </template>-->
-<!--    <template #actions>-->
-<!--      <wt-button-->
-<!--        :disabled="v$.$invalid"-->
-<!--        :loading="isLoading"-->
-<!--        @click="save"-->
-<!--      >-->
-<!--        {{ t('reusable.save') }}-->
-<!--      </wt-button>-->
-<!--      <wt-button-->
-<!--        color="secondary"-->
-<!--        @click="close"-->
-<!--      >-->
-<!--        {{ t('reusable.cancel') }}-->
-<!--      </wt-button>-->
-<!--    </template>-->
-<!--  </wt-popup>-->
-<!--</template>-->
-
-<!--<script setup>-->
-<!--/*-->
-<!--Although this popup actually represents emails, phones or messaging item card,-->
-<!--I decided not to provide these modules with "card" store and features because-->
-<!--I think it would be too overcomplicated because these 3 modules have shared communications-->
-<!--popup (by UI design, "Add" button is higher on component hierarchy than entity table itself)-->
-<!-- */-->
-<!--import { computed, reactive, ref, watch } from 'vue';-->
-<!--import { useI18n } from 'vue-i18n';-->
-<!--import { useVuelidate } from '@vuelidate/core';-->
-<!--import { required, email } from '@vuelidate/validators';-->
-<!--import { EngineCommunicationChannels } from 'webitel-sdk';-->
-<!--import CommunicationTypesAPI from '../api/CommunicationTypesAPI';-->
-
-<!--const props = defineProps({-->
-<!--  editedInstance: {-->
-<!--    type: Object,-->
-<!--  },-->
-<!--  callback: {-->
-<!--    type: Function,-->
-<!--    required: true,-->
-<!--  },-->
-<!--  initialChannel: {-->
-<!--    type: String,-->
-<!--    default: 'number',-->
-<!--  },-->
-<!--});-->
-
-<!--const emit = defineEmits([-->
-<!--  'close',-->
-<!--]);-->
-
-<!--const { t } = useI18n();-->
-
-<!--const channelOptions = [-->
-<!--  {-->
-<!--    value: 'number', // should be same as backend field for destination-->
-<!--    locale: ['vocabulary.phones', 1],-->
-<!--    filterField: EngineCommunicationChannels.Phone,-->
-<!--  },-->
-<!--  {-->
-<!--    value: 'email', // should be same as backend field for destination-->
-<!--    locale: ['vocabulary.emails', 1],-->
-<!--    filterField: EngineCommunicationChannels.Email,-->
-<!--  },-->
-<!--  // {-->
-<!--  //   value: 'messaging',-->
-<!--  //   locale: 'vocabulary.messaging',-->
-<!--  //   filterField: EngineCommunicationChannels.Messaging,-->
-<!--  // },-->
-<!--];-->
-
-<!--const getDefaultDraft = () => ({-->
-<!--  channel: channelOptions.find(({ value }) => value === props.initialChannel).value,-->
-<!--  type: {},-->
-<!--  destination: '',-->
-<!--});-->
-
-<!--const draft = reactive(getDefaultDraft());-->
-<!--const isLoading = ref(false);-->
-<!--const TypeSelect = ref(null);-->
-
-<!--const v$ = useVuelidate(computed(() => {-->
-<!--  const destination = { required };-->
-<!--  if (draft.channel === 'email') destination.email = email;-->
-<!--  return {-->
-<!--    draft: {-->
-<!--      channel: { required },-->
-<!--      type: { required },-->
-<!--      destination,-->
-<!--    },-->
-<!--  };-->
-<!--}), { draft }, { $autoDirty: true });-->
-
-<!--v$.value.$touch();-->
-
-<!--// const mode = computed(() => (props.editedInstance ? 'update' : 'create'));-->
-
-<!--const channel = computed(() => channelOptions.find(({ value }) => draft.channel === value));-->
-
-<!--function initDraft() {-->
-<!--  draft.channel = channelOptions.find(({ value }) => props.editedInstance[value]).value;-->
-<!--  draft.destination = props.editedInstance[draft.channel];-->
-<!--  draft.type = props.editedInstance.type;-->
-<!--}-->
-
-<!--if (mode.value === 'update') initDraft();-->
-
-<!--function close() {-->
-<!--  emit('close');-->
-<!--}-->
-
-<!--async function save() {-->
-<!--  try {-->
-<!--    isLoading.value = true;-->
-<!--    await props.callback(draft);-->
-<!--    close();-->
-<!--  } finally {-->
-<!--    isLoading.value = false;-->
-<!--  }-->
-<!--}-->
-
-<!--watch(channel, () => {-->
-<!--  draft.type = {}; // reset selected type, because it has another channel-->
-<!--  TypeSelect.value.fetchOptions(); // load types by newly changed channel filter-->
-<!--});-->
-<!--</script>-->
-
-<!--<style lang="scss" scoped>-->
-<!--.opened-contact-communication-popup-form {-->
-<!--  display: flex;-->
-<!--  flex-direction: column;-->
-<!--  gap: var(&#45;&#45;spacing-xs);-->
-<!--}-->
-<!--</style>-->
-
 <template>
   <wt-popup
     class="opened-contact-add-communication-popup"
@@ -189,7 +7,7 @@
   >
     <template #header>
       {{ item ? t('reusable.edit') : t('reusable.add') }}
-      {{ locale ||
+      {{ props.label.toLowerCase() ||
         t('contacts.communications.communications', 1).toLowerCase()
       }}
     </template>
@@ -197,12 +15,10 @@
       <form
         class="opened-contact-communication-popup-form"
       >
-        {{ draft.channel }}
-        {{ {...params, channel: draft.channel } }}
         <wt-select
           ref="TypeSelect"
           :value="draft.type"
-          :v="v$.draft.type"
+          :v="v$.draft.type.model"
           :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: props.filterField })"
           :clearable="false"
           :label="t('objects.communicationType', 1)"
@@ -263,13 +79,9 @@ const props = defineProps({
   label: {
     type: String,
   },
-  callback: {
-    type: Function,
-    required: true,
-  },
 });
 
-const emit = defineEmits(['saved', 'close']);
+const emit = defineEmits(['save', 'update', 'close']);
 
 
 const getDefaultDraft = () => ({
@@ -278,22 +90,24 @@ const getDefaultDraft = () => ({
   destination: '',
 });
 
-// const draft = reactive(getDefaultDraft());
+
 const isLoading = ref(false);
 const isSaving = ref(false);
 const TypeSelect = ref(null);
 
 const draft = computed(() => {
-  return props.item || getDefaultDraft();
+  const initDraft = props.item ?
+    {
+      channel: props.item.channel ,
+      type: props.item.type,
+      destination: props.item[props.channel],
+    }
+    :  getDefaultDraft();
+  return reactive(initDraft);
 });
 
-// const channel = computed(() => {
-//   return props.item.channel || draft.channel;
-// });
-
 const v$ = useVuelidate(computed(() => {
-  const destination = { required };
-  if (draft.channel === 'email') destination.email = email;
+  const destination = props.channel === 'email' ? { required, email } : { required };
   return {
     draft: {
       channel: { required },
@@ -303,40 +117,48 @@ const v$ = useVuelidate(computed(() => {
   };
 }), { draft }, { $autoDirty: true });
 
+v$.value.$touch();
 
-
-// v$.value.$touch();
-
-
-
-// function close() {
-//   emit('close');
-// }
+console.log('useVuelidate', 'v$.value:', v$.value);
 
 async function save() {
-  let newContact = '';
   try {
-    isSaving.value = false;
-    // if (props.id) {
-    //   await ContactsAPI.update({ itemInstance: { ...draft.value, id: props.id } });
-    // } else {
-    //   newContact = await ContactsAPI.add({ itemInstance: draft.value });
-    // }
-    // emit('saved', props.id || newContact.id); //залишити
+    isSaving.value = true;
+    if (props.item) {
+      console.log('update draft.value:', draft.value);
+      emit('update', draft.value);
+      // updateItem(draft.value);
+    } else {
+      console.log('save draft.value:', draft.value);
+      emit('save', draft.value);
+      // addItem(draft.value);
+    }
+    // emit('saved', draft.value.id || newCommunication.id); //залишити, бо це сигнал, що було збережено і повертається айдішка
     close();
   } finally {
     isSaving.value = false;
   }
 }
 
+// function addItem({ type, destination }) {
+//   //сформулювати данні з драфту
+//   const itemInstance = { type, [props.channel]: destination };
+//   return store.dispatch(`${namespace}/ADD_${props.filterField.toUpperCase()}`, { itemInstance });
+// }
+//
+// function updateItem({ channel, destination, ...rest }) {
+//   //сформулювати данні з драфту
+//   const itemInstance = { ...rest, [props.channel]: destination };
+//   return store.dispatch(`${namespace}/UPDATE_${props.filterField.toUpperCase()}`, {
+//     itemInstance,
+//     etag: item.value.etag,
+//   });
+// }
+
 function close() {
   emit('close');
 }
 
-// function setDefaultDraft() {
-//   draft.value = getDefaultDraft;
-// }
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index 27bd0fe..0b43103 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -1,17 +1,14 @@
 <template>
   <div class="contact-communication-tab emails">
-<!--    <add-communication-popup-->
-<!--      v-if="isCommunicationPopup"-->
-<!--      initial-channel="email"-->
-<!--      :callback="saveEmail"-->
-<!--      @close="isCommunicationPopup = false"-->
-<!--    />-->
 
     <communication-popup
       v-if="isCommunicationPopup"
       :item="editedItem"
       :filter-field="EngineCommunicationChannels.Email"
-      :label="t('vocabulary.emails', 1)"
+      :label="t('contacts.communications.emails.title')"
+      channel="email"
+      @save="saveEmail"
+      @update="updateEmail"
       @close="closePopup"
     />
 
@@ -153,22 +150,24 @@ function saveEmail({ type, destination }) {
   return store.dispatch(`${namespace}/ADD_EMAIL`, { itemInstance });
 }
 
+function updateEmail({ channel, destination, ...rest }) {
+  const itemInstance = { ...rest, email: destination };
+  return store.dispatch(`${namespace}/UPDATE_EMAIL`, {
+    itemInstance,
+    etag: editedItem.value.etag,
+  });
+}
+
 function edit(item) {
   editedItem.value = item;
   isCommunicationPopup.value = true;
 }
 
-// function updateEmail({ channel, destination, ...rest }) {
-//   const itemInstance = { ...rest, [channel]: destination };
-//   return store.dispatch(`${namespace}/UPDATE_EMAIL`, {
-//     itemInstance,
-//     etag: editedItem.value.etag,
-//   });
-// }
-
 function closePopup() {
   isCommunicationPopup.value = false;
+  editedItem.value = null
 }
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/contacts/modules/phones/components/the-phones.vue b/src/modules/contacts/modules/phones/components/the-phones.vue
index d5838e5..b2e1d23 100644
--- a/src/modules/contacts/modules/phones/components/the-phones.vue
+++ b/src/modules/contacts/modules/phones/components/the-phones.vue
@@ -1,17 +1,14 @@
 <template>
   <div class="contact-communication-tab phones">
-    <add-communication-popup
-      v-if="isCommunicationPopup"
-      initial-channel="number"
-      :callback="savePhone"
-      @close="isCommunicationPopup = false"
-    />
 
     <communication-popup
-      v-if="editedItem"
-      :edited-instance="editedItem"
-      :callback="updatePhone"
-      @close="editedItem = null"
+      v-if="isCommunicationPopup"
+      :item="editedItem"
+      :filter-field="EngineCommunicationChannels.Phone"
+      :label="t('contacts.communications.phones.title')"
+      @save="savePhone"
+      :update="updatePhone"
+      @close="closePopup"
     />
 
     <delete-confirmation-popup
@@ -69,7 +66,7 @@
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="edit"
-            @click="editedItem = item"
+            @click="edit(item)"
           />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
@@ -98,7 +95,8 @@ import {
 import { useStore } from 'vuex';
 import dummyLight from '../assets/phone-dummy-light.svg';
 import dummyDark from '../assets/phone-dummy-dark.svg';
-import AddCommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
+import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
+import { EngineCommunicationChannels } from 'webitel-sdk';
 
 const access = inject('access');
 
@@ -137,7 +135,6 @@ const {
 } = useDeleteConfirmationPopup();
 
 const editedItem = ref(null);
-
 const isCommunicationPopup = ref(false);
 
 const showDummy = computed(() => !dataList.value.length);
@@ -153,12 +150,22 @@ function savePhone({ type, destination }) {
 }
 
 function updatePhone({ channel, destination, ...rest }) {
-  const itemInstance = { ...rest, [channel]: destination };
+  const itemInstance = { ...rest, number: destination };
   return store.dispatch(`${namespace}/UPDATE_PHONE`, {
     itemInstance,
     etag: editedItem.value.etag,
   });
 }
+function edit(item) {
+  editedItem.value = item;
+  isCommunicationPopup.value = true;
+}
+
+function closePopup() {
+  isCommunicationPopup.value = false;
+  editedItem.value = null
+}
+
 </script>
 
 <style lang="scss" scoped>

From a8045eaab7b8c79f5496a23f6d83dc1bd7d8a0b5 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Mon, 12 Feb 2024 13:54:33 +0200
Subject: [PATCH 07/12] fix: refactoring contact communication popup
 [WTEL-3883]

---
 .../opened-contact-communication-popup.vue    | 94 +++++++++----------
 .../opened-contact-communications.vue         | 20 ----
 .../modules/emails/components/the-emails.vue  | 16 +---
 .../modules/phones/components/the-phones.vue  | 15 +--
 4 files changed, 48 insertions(+), 97 deletions(-)

diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index 85be549..3b97d96 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -1,6 +1,6 @@
 <template>
   <wt-popup
-    class="opened-contact-add-communication-popup"
+    class="opened-contact-communication-popup"
     width="480"
     overflow
     @close="close"
@@ -18,7 +18,7 @@
         <wt-select
           ref="TypeSelect"
           :value="draft.type"
-          :v="v$.draft.type.model"
+          :v="v$.draft.type"
           :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: props.filterField })"
           :clearable="false"
           :label="t('objects.communicationType', 1)"
@@ -35,19 +35,19 @@
       </form>
     </template>
     <template #actions>
-      <wt-button
-        :disabled="v$.$invalid"
-        :loading="isLoading"
-        @click="save"
-      >
-        {{ t('reusable.save') }}
-      </wt-button>
-      <wt-button
-        color="secondary"
-        @click="close"
-      >
-        {{ t('reusable.cancel') }}
-      </wt-button>
+        <wt-button
+          :disabled="v$.$invalid"
+          :loading="isLoading"
+          @click="save"
+        >
+          {{ t('reusable.save') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="close"
+        >
+          {{ t('reusable.cancel') }}
+        </wt-button>
     </template>
   </wt-popup>
 </template>
@@ -76,12 +76,16 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  namespace: {
+    type: String,
+    required: true,
+  },
   label: {
     type: String,
   },
 });
 
-const emit = defineEmits(['save', 'update', 'close']);
+const emit = defineEmits(['close']);
 
 
 const getDefaultDraft = () => ({
@@ -95,16 +99,7 @@ const isLoading = ref(false);
 const isSaving = ref(false);
 const TypeSelect = ref(null);
 
-const draft = computed(() => {
-  const initDraft = props.item ?
-    {
-      channel: props.item.channel ,
-      type: props.item.type,
-      destination: props.item[props.channel],
-    }
-    :  getDefaultDraft();
-  return reactive(initDraft);
-});
+const draft = reactive(getDefaultDraft());
 
 const v$ = useVuelidate(computed(() => {
   const destination = props.channel === 'email' ? { required, email } : { required };
@@ -117,43 +112,41 @@ const v$ = useVuelidate(computed(() => {
   };
 }), { draft }, { $autoDirty: true });
 
+function initDraft() {
+  draft.destination = props.item[props.channel];
+  draft.type = props.item.type;
+}
+
 v$.value.$touch();
 
-console.log('useVuelidate', 'v$.value:', v$.value);
+if (props.item) initDraft();
 
 async function save() {
   try {
     isSaving.value = true;
     if (props.item) {
-      console.log('update draft.value:', draft.value);
-      emit('update', draft.value);
-      // updateItem(draft.value);
+      await updateItem(draft);
     } else {
-      console.log('save draft.value:', draft.value);
-      emit('save', draft.value);
-      // addItem(draft.value);
+      await addItem(draft);
     }
-    // emit('saved', draft.value.id || newCommunication.id); //залишити, бо це сигнал, що було збережено і повертається айдішка
     close();
   } finally {
     isSaving.value = false;
   }
 }
 
-// function addItem({ type, destination }) {
-//   //сформулювати данні з драфту
-//   const itemInstance = { type, [props.channel]: destination };
-//   return store.dispatch(`${namespace}/ADD_${props.filterField.toUpperCase()}`, { itemInstance });
-// }
-//
-// function updateItem({ channel, destination, ...rest }) {
-//   //сформулювати данні з драфту
-//   const itemInstance = { ...rest, [props.channel]: destination };
-//   return store.dispatch(`${namespace}/UPDATE_${props.filterField.toUpperCase()}`, {
-//     itemInstance,
-//     etag: item.value.etag,
-//   });
-// }
+function addItem({ type, destination }) {
+  const itemInstance = { type, [props.channel]: destination };
+  return store.dispatch(`${props.namespace}/ADD_${props.filterField.toUpperCase()}`, { itemInstance });
+}
+
+function updateItem({ channel, destination, ...rest }) {
+  const itemInstance = { ...rest, [props.channel]: destination };
+  return store.dispatch(`${props.namespace}/UPDATE_${props.filterField.toUpperCase()}`, {
+    itemInstance,
+    etag: props.item.etag,
+  });
+}
 
 function close() {
   emit('close');
@@ -167,4 +160,9 @@ function close() {
   flex-direction: column;
   gap: var(--spacing-xs);
 }
+
+.opened-contact-communication-popup-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+}
 </style>
diff --git a/src/modules/contacts/components/opened-contact-communications.vue b/src/modules/contacts/components/opened-contact-communications.vue
index 4c1d99d..1408980 100644
--- a/src/modules/contacts/components/opened-contact-communications.vue
+++ b/src/modules/contacts/components/opened-contact-communications.vue
@@ -1,12 +1,6 @@
 <template>
   <section class="opened-contact-communications">
     <header class="opened-contact-communications-header">
-<!--      <add-communication-popup-->
-<!--        v-if="isCommunicationPopup"-->
-<!--        :initial-channel="currentTab.channel"-->
-<!--        :callback="saveCommunication"-->
-<!--        @close="isCommunicationPopup = false"-->
-<!--      ></add-communication-popup>-->
       <wt-button
         v-for="(tab) of tabs"
         :key="tab.value"
@@ -20,11 +14,6 @@
         />
         {{ tab.label }}
       </wt-button>
-<!--      <wt-button-->
-<!--        :disabled="!access.hasRbacEditAccess"-->
-<!--        @click="isCommunicationPopup = true"-->
-<!--      >{{ t('reusable.add') }}-->
-<!--      </wt-button>-->
     </header>
     <component
       :is="currentTab.component"
@@ -39,7 +28,6 @@ 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 AddCommunicationPopup from './opened-contact-communication-popup.vue';
 
 const access = inject('access');
 
@@ -77,14 +65,6 @@ const tabs = computed(() => [
 
 const currentTab = ref(tabs.value[0]);
 
-// const isCommunicationPopup = ref(false);
-
-// function saveCommunication({ channel, type, destination }) {
-//   const itemInstance = { type, [channel]: destination };
-//   if (channel === 'email') return store.dispatch(`${emailsNamespace}/table/ADD_EMAIL`, { itemInstance });
-//   if (channel === 'number') return store.dispatch(`${phonesNamespace}/table/ADD_PHONE`, { itemInstance });
-//   throw TypeError(`Unknown communication channel: ${channel}`);
-// }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index 0b43103..5b9b6ac 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -6,9 +6,8 @@
       :item="editedItem"
       :filter-field="EngineCommunicationChannels.Email"
       :label="t('contacts.communications.emails.title')"
+      :namespace="namespace"
       channel="email"
-      @save="saveEmail"
-      @update="updateEmail"
       @close="closePopup"
     />
 
@@ -145,19 +144,6 @@ function setAsPrimary({ item, index }) {
   return store.dispatch(`${namespace}/SET_AS_PRIMARY`, { item, index });
 }
 
-function saveEmail({ type, destination }) {
-  const itemInstance = { type, email: destination };
-  return store.dispatch(`${namespace}/ADD_EMAIL`, { itemInstance });
-}
-
-function updateEmail({ channel, destination, ...rest }) {
-  const itemInstance = { ...rest, email: destination };
-  return store.dispatch(`${namespace}/UPDATE_EMAIL`, {
-    itemInstance,
-    etag: editedItem.value.etag,
-  });
-}
-
 function edit(item) {
   editedItem.value = item;
   isCommunicationPopup.value = true;
diff --git a/src/modules/contacts/modules/phones/components/the-phones.vue b/src/modules/contacts/modules/phones/components/the-phones.vue
index b2e1d23..41ec058 100644
--- a/src/modules/contacts/modules/phones/components/the-phones.vue
+++ b/src/modules/contacts/modules/phones/components/the-phones.vue
@@ -6,8 +6,7 @@
       :item="editedItem"
       :filter-field="EngineCommunicationChannels.Phone"
       :label="t('contacts.communications.phones.title')"
-      @save="savePhone"
-      :update="updatePhone"
+      :namespace="namespace"
       @close="closePopup"
     />
 
@@ -144,18 +143,6 @@ function setAsPrimary({ item, index }) {
   return store.dispatch(`${namespace}/SET_AS_PRIMARY`, { item, index });
 }
 
-function savePhone({ type, destination }) {
-  const itemInstance = { type, number: destination };
-  return store.dispatch(`${namespace}/ADD_PHONE`, { itemInstance });
-}
-
-function updatePhone({ channel, destination, ...rest }) {
-  const itemInstance = { ...rest, number: destination };
-  return store.dispatch(`${namespace}/UPDATE_PHONE`, {
-    itemInstance,
-    etag: editedItem.value.etag,
-  });
-}
 function edit(item) {
   editedItem.value = item;
   isCommunicationPopup.value = true;

From e8daf12fdb7ea238fb657200eef4b7583e5ec866 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Mon, 12 Feb 2024 14:05:02 +0200
Subject: [PATCH 08/12] fix: delete test auth component [WTEL-3883]

---
 src/app/router/index.js |  6 ++--
 src/auth-test.vue       | 80 -----------------------------------------
 2 files changed, 2 insertions(+), 84 deletions(-)
 delete mode 100644 src/auth-test.vue

diff --git a/src/app/router/index.js b/src/app/router/index.js
index dfb7721..aa08eb0 100644
--- a/src/app/router/index.js
+++ b/src/app/router/index.js
@@ -1,8 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import CrmSections
   from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum';
-// import Auth from '@webitel/ui-sdk/src/modules/Userinfo/components/the-auth.vue';
-import Auth from '../../auth-test.vue';
+import Auth from '@webitel/ui-sdk/src/modules/Userinfo/components/the-auth.vue';
 import store from '../store';
 import TheCrmWorkspace from '../components/the-crm-workspace.vue';
 import TheContacts from '../../modules/contacts/components/the-contacts.vue';
@@ -28,7 +27,7 @@ const checkAppAccess = (to, from, next) => {
 const checkRouteAccess = ((to, from, next) => {
   // has Role Section Access AND (Select role permissions || ObAC permissions access)
   const hasReadAccess = store.getters['userinfo/CHECK_OBJECT_ACCESS']({ route: to })
-  && store.getters['userinfo/HAS_READ_ACCESS']({ name: 'contacts' });
+    && store.getters['userinfo/HAS_READ_ACCESS']({ name: 'contacts' });
   if (hasReadAccess) {
     next();
   } else {
@@ -87,7 +86,6 @@ const routes = [
   },
 ];
 
-
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior() {
diff --git a/src/auth-test.vue b/src/auth-test.vue
deleted file mode 100644
index af36666..0000000
--- a/src/auth-test.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div class="auth-wrap">
-    <div
-      v-show="!isLoaded"
-      class="auth-loader"
-    >
-      <wt-loader />
-    </div>
-    <iframe
-      class="auth"
-      :src="authURL"
-      @load="isLoaded = true"
-    >
-      <p>Your browser does not support iframes.</p>
-    </iframe>
-  </div>
-</template>
-
-<script>
-import AuthAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/auth';
-
-const authURL = import.meta.env.VITE_AUTH_MODULE_URL;
-
-export default {
-  name: 'Auth',
-  props: {
-    namespace: {
-      type: String,
-      default: 'userinfo',
-    },
-  },
-  data: () => ({
-    authURL,
-    isLoaded: false,
-  }),
-
-  mounted() {
-    console.log('authURL:', authURL, 'process:', process, 'process.env.VUE_APP_AUTH_MODULE_URL:', process.env.VUE_APP_AUTH_MODULE_URL);
-    window.addEventListener('message', this.authMessageHandler, false);
-  },
-  unmounted() {
-    window.removeEventListener('message', this.authMessageHandler, false);
-  },
-
-  methods: {
-    openSession(payload) {
-      return this.$store.dispatch(`${this.namespace}/OPEN_SESSION`, payload);
-    },
-    async authMessageHandler(event) {
-      if (event.data.accessToken) {
-        // eslint-disable-next-line import/no-named-as-default-member
-        await AuthAPI.setToken(event.data.accessToken);
-        await this.openSession();
-        await this.$router.replace('/');
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.auth-wrap {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-
-  .wt-loader {
-    position: absolute;
-    top: 50%;
-    right: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .auth {
-    height: 100%;
-    width: 100%;
-  }
-}
-</style>

From 9bb385f286b2f8755f330fac52bf89194275a861 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Mon, 12 Feb 2024 14:10:04 +0200
Subject: [PATCH 09/12] fix: refactoring contact communication popup
 [WTEL-3883]

---
 .../components/opened-contact-communication-popup.vue        | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index 3b97d96..b05b937 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -160,9 +160,4 @@ function close() {
   flex-direction: column;
   gap: var(--spacing-xs);
 }
-
-.opened-contact-communication-popup-actions {
-  display: flex;
-  gap: var(--spacing-sm);
-}
 </style>

From 5177774de0d5d8d7179a7439260d6270dc120924 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Mon, 12 Feb 2024 19:57:59 +0200
Subject: [PATCH 10/12] fix: refactoring contact communication popup
 [WTEL-3883]

---
 .env                                          |  2 +-
 .../opened-contact-communication-popup.vue    | 51 +++++++++++++------
 .../modules/emails/components/the-emails.vue  |  3 --
 .../modules/phones/components/the-phones.vue  |  3 --
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/.env b/.env
index 007503d..aecf636 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 VITE_API_URL = '/api'
 VITE_CHAT_URL = '/chat'
 
-VITE_AUTH_MODULE_URL = '/app/auth'
+VITE_AUTH_MODE_URL = '/app/auth'
 
 VITE_ADMIN_URL = '/admin'
 VITE_AGENT_URL = '/workspace'
diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index b05b937..96e3384 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -7,7 +7,7 @@
   >
     <template #header>
       {{ item ? t('reusable.edit') : t('reusable.add') }}
-      {{ props.label.toLowerCase() ||
+      {{ currentCommunication.locale.toLowerCase() ||
         t('contacts.communications.communications', 1).toLowerCase()
       }}
     </template>
@@ -19,7 +19,7 @@
           ref="TypeSelect"
           :value="draft.type"
           :v="v$.draft.type"
-          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: props.filterField })"
+          :search-method="(params) => CommunicationTypesAPI.getLookup({...params, channel: currentCommunication.filterField })"
           :clearable="false"
           :label="t('objects.communicationType', 1)"
           required
@@ -59,6 +59,7 @@ import { required, email } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import CommunicationTypesAPI from '../api/CommunicationTypesAPI';
+import { EngineCommunicationChannels } from 'webitel-sdk';
 
 const { t } = useI18n();
 const store = useStore();
@@ -72,21 +73,43 @@ const props = defineProps({
     type: String,
     default: 'number',
   },
-  filterField: {
-    type: String,
-    required: true,
-  },
   namespace: {
     type: String,
     required: true,
   },
-  label: {
-    type: String,
-  },
 });
 
 const emit = defineEmits(['close']);
 
+const isLoading = ref(false);
+const isSaving = ref(false);
+const TypeSelect = ref(null);
+
+const communicationOptions = [
+  {
+    value: 'email', // should be same as backend field for destination
+    locale: t('contacts.communications.emails.title'),
+    filterField: EngineCommunicationChannels.Email,
+    addNamespace: `${props.namespace}/ADD_EMAIL`,
+    updateNamespace: `${props.namespace}/UPDATE_EMAIL`,
+  },
+  {
+    value: 'number',
+    locale: t('contacts.communications.phones.title'),
+    filterField: EngineCommunicationChannels.Phone,
+    addNamespace: `${props.namespace}/ADD_PHONE`,
+    updateNamespace: `${props.namespace}/UPDATE_PHONE`,
+  },
+  // {
+  //   value: 'messaging',
+  //   locale: ,
+  //   filterField: EngineCommunicationChannels.Messaging,
+  //   namespace: ,
+  // },
+];
+
+const currentCommunication = ref(communicationOptions.find((option) => option.value === props.channel));
+
 
 const getDefaultDraft = () => ({
   channel: props.channel,
@@ -94,11 +117,6 @@ const getDefaultDraft = () => ({
   destination: '',
 });
 
-
-const isLoading = ref(false);
-const isSaving = ref(false);
-const TypeSelect = ref(null);
-
 const draft = reactive(getDefaultDraft());
 
 const v$ = useVuelidate(computed(() => {
@@ -122,6 +140,7 @@ v$.value.$touch();
 if (props.item) initDraft();
 
 async function save() {
+
   try {
     isSaving.value = true;
     if (props.item) {
@@ -137,12 +156,12 @@ async function save() {
 
 function addItem({ type, destination }) {
   const itemInstance = { type, [props.channel]: destination };
-  return store.dispatch(`${props.namespace}/ADD_${props.filterField.toUpperCase()}`, { itemInstance });
+  return store.dispatch(`${currentCommunication.value.addNamespace}`, { itemInstance });
 }
 
 function updateItem({ channel, destination, ...rest }) {
   const itemInstance = { ...rest, [props.channel]: destination };
-  return store.dispatch(`${props.namespace}/UPDATE_${props.filterField.toUpperCase()}`, {
+  return store.dispatch(`${currentCommunication.value.updateNamespace}`, {
     itemInstance,
     etag: props.item.etag,
   });
diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
index 5b9b6ac..7a7cc8c 100644
--- a/src/modules/contacts/modules/emails/components/the-emails.vue
+++ b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -4,8 +4,6 @@
     <communication-popup
       v-if="isCommunicationPopup"
       :item="editedItem"
-      :filter-field="EngineCommunicationChannels.Email"
-      :label="t('contacts.communications.emails.title')"
       :namespace="namespace"
       channel="email"
       @close="closePopup"
@@ -96,7 +94,6 @@ import { useStore } from 'vuex';
 import dummyLight from '../assets/email-dummy-light.svg';
 import dummyDark from '../assets/email-dummy-dark.svg';
 import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
-import { EngineCommunicationChannels } from 'webitel-sdk';
 
 const access = inject('access');
 
diff --git a/src/modules/contacts/modules/phones/components/the-phones.vue b/src/modules/contacts/modules/phones/components/the-phones.vue
index 41ec058..b3db5b7 100644
--- a/src/modules/contacts/modules/phones/components/the-phones.vue
+++ b/src/modules/contacts/modules/phones/components/the-phones.vue
@@ -4,8 +4,6 @@
     <communication-popup
       v-if="isCommunicationPopup"
       :item="editedItem"
-      :filter-field="EngineCommunicationChannels.Phone"
-      :label="t('contacts.communications.phones.title')"
       :namespace="namespace"
       @close="closePopup"
     />
@@ -95,7 +93,6 @@ import { useStore } from 'vuex';
 import dummyLight from '../assets/phone-dummy-light.svg';
 import dummyDark from '../assets/phone-dummy-dark.svg';
 import CommunicationPopup from '../../../components/opened-contact-communication-popup.vue';
-import { EngineCommunicationChannels } from 'webitel-sdk';
 
 const access = inject('access');
 

From 060d07c626fec81c27e0e640706789a36a0e166a Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Mon, 12 Feb 2024 19:59:14 +0200
Subject: [PATCH 11/12] fix: return old env [WTEL-3883]

---
 .env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env b/.env
index aecf636..007503d 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 VITE_API_URL = '/api'
 VITE_CHAT_URL = '/chat'
 
-VITE_AUTH_MODE_URL = '/app/auth'
+VITE_AUTH_MODULE_URL = '/app/auth'
 
 VITE_ADMIN_URL = '/admin'
 VITE_AGENT_URL = '/workspace'

From c76511788d7628cffadfe0f93cb04904fdb99cf2 Mon Sep 17 00:00:00 2001
From: lizacoma <my.skin00@gmail.com>
Date: Tue, 13 Feb 2024 15:18:43 +0200
Subject: [PATCH 12/12] fix: small refactoring after rewiev [WTEL-3883]

---
 src/app/locale/en/en.js                                    | 4 ++--
 .../components/opened-contact-communication-popup.vue      | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index a7e1d65..9801d95 100644
--- a/src/app/locale/en/en.js
+++ b/src/app/locale/en/en.js
@@ -16,11 +16,11 @@ export default {
       destination: 'Destination',
       setAsPrimary: 'Set as primary',
       emails: {
-        title: 'the email',
+        title: 'The email',
         dummy: 'There are no email addresses yet',
       },
       phones: {
-        title: 'the phone number',
+        title: 'The phone number',
         dummy: 'There are no phone numbers yet',
       },
     },
diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
index 96e3384..a3fe3f6 100644
--- a/src/modules/contacts/components/opened-contact-communication-popup.vue
+++ b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -108,9 +108,6 @@ const communicationOptions = [
   // },
 ];
 
-const currentCommunication = ref(communicationOptions.find((option) => option.value === props.channel));
-
-
 const getDefaultDraft = () => ({
   channel: props.channel,
   type: {},
@@ -119,6 +116,10 @@ const getDefaultDraft = () => ({
 
 const draft = reactive(getDefaultDraft());
 
+const currentCommunication = computed(() => {
+  return communicationOptions.find((option) => option.value === props.channel);
+});
+
 const v$ = useVuelidate(computed(() => {
   const destination = props.channel === 'email' ? { required, email } : { required };
   return {