From e4ab2aa431fb2c7c96e9fea43bd1be266d2903d8 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Thu, 25 Apr 2024 14:15:30 +0300
Subject: [PATCH] fix: computed props in chat-task-time-row
 component[WTEL-4418]

---
 .../task-row/call-task-timeline-row.vue       | 42 ++++----
 .../components/utils/timeline-pin.vue         | 22 ++---
 .../utils/timeline-row-initiator.vue          | 48 +++++++---
 .../timeline/enums/TimelinePinType.enum.js    |  3 +-
 .../task-row/chat-task-timeline-row.vue       | 95 ++++++++++---------
 5 files changed, 120 insertions(+), 90 deletions(-)

diff --git a/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
index ae559cd5..efda6413 100644
--- a/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
+++ b/src/modules/contacts/modules/timeline/components/task-row/call-task-timeline-row.vue
@@ -15,29 +15,31 @@
         </timeline-row-info>
       </template>
 
-      <template v-slot:pin>
+      <template #pin="{ toggle, collapsed }">
         <timeline-pin
+          :collapsed="collapsed"
           :type="taskType"
+          @click="toggle"
         ></timeline-pin>
       </template>
 
       <template v-slot:content>
-        <div class="chat-task-timeline-row__content">
-          <div class="chat-task-timeline-row__wrapper">
+        <div class="call-task-timeline-row__content">
+          <div class="call-task-timeline-row__wrapper">
             <timeline-row-initiator
               :type="taskType"
               :text="taskInitiator.name"
             ></timeline-row-initiator>
 
             <wt-chip
-              v-if="hiddenUsers.length"
-              @click="openHiddenUsers = !openHiddenUsers"
-            >{{ +hiddenUsers.lenght }}
+              v-if="hiddenParticipants.length"
+              @click="openHiddenParticipants = !openHiddenParticipants"
+            >{{ +hiddenParticipants.lenght }}
             </wt-chip>
 
-            <div v-if="openHiddenUsers">
+            <div v-if="openHiddenParticipants">
               <timeline-row-initiator
-                v-for="user of hiddenUsers"
+                v-for="user of hiddenParticipants"
                 :text="user.name"
               ></timeline-row-initiator>
             </div>
@@ -46,7 +48,7 @@
               :duration="duration"
             ></timeline-row-duration>
 
-        </div>
+          </div>
 
           <call-task-timeline-actions
             v-if="taskType !== TimelinePinTypeEnum.CHAT"
@@ -62,7 +64,6 @@
 
 <script setup>
 import { computed, toRefs, ref } from 'vue';
-import { WebitelContactsTimelineEventType } from 'webitel-sdk';
 import TimelinePinTypeEnum from '../../enums/TimelinePinType.enum.js';
 import TimelineTaskStatusEnum from '../../enums/TimelineTaskStatus.enum.js';
 import TimelinePin from '../utils/timeline-pin.vue';
@@ -83,7 +84,7 @@ const props = defineProps({
 const {
   createdAt,
   participants,
-  type,
+  isInbound,
   isMissed,
   duration,
   flowScheme,
@@ -91,21 +92,16 @@ const {
   id,
 } = toRefs(props.task);
 
-const openHiddenUsers = ref(false);
+const openHiddenParticipants = ref(false);
 
 const taskType = computed(() => {
-  if (type.value === WebitelContactsTimelineEventType.Chat) {
-    return TimelinePinTypeEnum.CHAT;
-  } else {
+  if(isInbound.value) {
     if (isMissed?.value) {
-      if (queue?.value) return TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE;
-      return TimelinePinTypeEnum.CALL_MISSED;
+      return queue?.value ? TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE : TimelinePinTypeEnum.CALL_MISSED;
     } else {
-      if (!queue?.value) return TimelinePinTypeEnum.CALL_INBOUND_ON_IVR;
-      return TimelinePinTypeEnum.CALL_INBOUND;
+      return !queue?.value ? TimelinePinTypeEnum.CALL_INBOUND_ON_IVR : TimelinePinTypeEnum.CALL_INBOUND;
     }
-    return TimelinePinTypeEnum.CALL_OUTBOUND;
-  }
+  } return TimelinePinTypeEnum.CALL_OUTBOUND;
 });
 
 const taskStatus = computed(() => taskType.value.includes(TimelinePinTypeEnum.CALL_MISSED)
@@ -123,11 +119,11 @@ const taskInitiator = computed(() => {
   }
 });
 
-const hiddenUsers = computed(() => participants.value.filter(participant => participant.id !==  taskInitiator.value.id));
+const hiddenParticipants = computed(() => participants?.value?.filter(participant => participant.id !== taskInitiator.value.id));
 </script>
 
 <style lang="scss" scoped>
-.chat-task-timeline-row {
+.call-task-timeline-row {
   &__content {
     display: flex;
     gap: var(--spacing-sm);
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
index c17743ab..63970a11 100644
--- a/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-pin.vue
@@ -13,7 +13,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import TimelinePinType from '../../enums/TimelinePinType.enum.js';
+import TimelinePinTypeEnum from '../../enums/TimelinePinType.enum.js';
 import TimelineSeparator from './timeline-separator.vue';
 
 const props = defineProps({
@@ -36,51 +36,51 @@ const emit = defineEmits([
 ]);
 
 const stateMap = {
-  [TimelinePinType.DAY]: {
+  [TimelinePinTypeEnum.DAY]: {
     component: 'wt-button',
     color: 'secondary',
   },
-  [TimelinePinType.CLOSE]: {
+  [TimelinePinTypeEnum.CLOSE]: {
     component: 'wt-rounded-action',
     icon: 'close',
     rounded: true,
   },
-  [TimelinePinType.CHAT]: {
+  [TimelinePinTypeEnum.CHAT]: {
     component: 'wt-rounded-action',
     color: 'chat',
     icon: 'chat',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_INBOUND]: {
+  [TimelinePinTypeEnum.CALL_INBOUND]: {
     component: 'wt-rounded-action',
     color: 'primary',
     icon: 'call-inbound',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_OUTBOUND]: {
+  [TimelinePinTypeEnum.CALL_OUTBOUND]: {
     component: 'wt-rounded-action',
     color: 'success',
     icon: 'call-outbound',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_MISSED]: {
+  [TimelinePinTypeEnum.CALL_MISSED]: {
     component: 'wt-rounded-action',
     color: 'error',
     icon: 'call-missed',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_INBOUND_ON_IVR]: {
+  [TimelinePinTypeEnum.CALL_INBOUND_ON_IVR]: {
     component: 'wt-rounded-action',
     color: 'primary',
     icon: 'call-inbound',
     filled: true,
     rounded: true,
   },
-  [TimelinePinType.CALL_MISSED_ON_QUEUE]: {
+  [TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE]: {
     component: 'wt-rounded-action',
     color: 'error',
     icon: 'call-missed',
@@ -91,8 +91,8 @@ const stateMap = {
 };
 
 const state = computed(() => {
-  if(props.type === TimelinePinType.DAY) return stateMap[TimelinePinType.DAY];
-  return props.collapsed ? stateMap[props.type] : stateMap[TimelinePinType.CLOSE];
+  if(props.type === TimelinePinTypeEnum.DAY) return stateMap[TimelinePinTypeEnum.DAY];
+  return props.collapsed ? stateMap[props.type] : stateMap[TimelinePinTypeEnum.CLOSE];
 });
 
 const handleClick = () => {
diff --git a/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue b/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue
index 6b82d817..7c1128f1 100644
--- a/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue
+++ b/src/modules/contacts/modules/timeline/components/utils/timeline-row-initiator.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="timeline-row-initiator">
-    <div v-if="type === TimelinePinTypeEnum.CALL_INBOUND_ON_IVR">
-      <wt-icon
-        icon="bot"
-      ></wt-icon>
+    <div
+      v-if="isDisplayBotName"
+      class="timeline-row-initiator-bot"
+    >
+      <div class="timeline-row-initiator-bot__icon">
+        <wt-icon
+          icon="bot"
+        ></wt-icon>
+
+      </div>
       <p>{{ text }}</p>
     </div>
 
-    <div v-else-if="type === TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE">
+    <div v-else-if="isDisplayFlowSchemeName">
       <wt-chip
         color="secondary"
       >{{text}}</wt-chip>
@@ -26,6 +32,7 @@
 
 <script setup>
 import TimelinePinTypeEnum from '../../enums/TimelinePinType.enum.js';
+import { computed } from 'vue';
 
 const props = defineProps({
   text: {
@@ -36,16 +43,35 @@ const props = defineProps({
     type: String,
   }
 });
+
+const isDisplayBotName = computed(() => props.type === TimelinePinTypeEnum.CALL_INBOUND_ON_IVR || props.type === TimelinePinTypeEnum.CHAT_GATEWAY);
+const isDisplayFlowSchemeName = computed(() => props.type === TimelinePinTypeEnum.CALL_MISSED_ON_QUEUE);
 </script>
 
 <style  lang="scss" scoped>
-.timeline-row-initiator-user {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
+.timeline-row-initiator {
+  &-user {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
 
-  &__name {
-    @extend %typo-subtitle-1;
+    &__name {
+      @extend %typo-subtitle-1;
+    }
+  }
+
+  &-bot {
+    display: flex;
+    gap: var(--spacing-xs);
+    align-items: center;
+
+    &__icon {
+      background-color: var(--secondary-color);
+      padding: var(--spacing-xs);
+      border-radius: 50%;
+      height: 40px; ///?
+    }
   }
 }
+
 </style>
diff --git a/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js b/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js
index 906c4e15..9073d44b 100644
--- a/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js
+++ b/src/modules/contacts/modules/timeline/enums/TimelinePinType.enum.js
@@ -2,10 +2,11 @@ const TimelinePinType = Object.freeze({
   DAY: 'DAY',
   CLOSE: 'CLOSE',
   CHAT: 'CHAT',
+  CHAT_GATEWAY: 'CHAT_GATEWAY',
   CALL_INBOUND: 'CALL_INBOUND',
+  CALL_INBOUND_ON_IVR: 'CALL_INBOUND_ON_IVR',
   CALL_OUTBOUND: 'CALL_OUTBOUND',
   CALL_MISSED: 'CALL_MISSED',
-  CALL_INBOUND_ON_IVR: 'CALL_INBOUND_ON_IVR',
   CALL_MISSED_ON_QUEUE: 'CALL_MISSED_ON_QUEUE',
 
   CALL_TRANSFER: 'CALL_TRANSFER',
diff --git a/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue b/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
index 96484199..4c8baec4 100644
--- a/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
+++ b/src/modules/contacts/modules/timeline/modules/chats/components/task-row/chat-task-timeline-row.vue
@@ -4,13 +4,13 @@
       <timeline-row-info
         :timestamp="createdAt"
       >
-        <template
-          #title="{ time }"
-        ></template>
+        <template #title="{ time }">
+          {{ time }}
+        </template>
 
         <template #subtitle>
           <timeline-task-status
-            :status="taskStatus"
+            :status="TimelineTaskStatusEnum.STARTED"
           />
         </template>
       </timeline-row-info>
@@ -18,25 +18,35 @@
     <template #pin="{ toggle, collapsed }">
       <timeline-pin
         :collapsed="collapsed"
-        :type="taskType"
+        :type="TimelinePinType.CHAT"
         @click="toggle"
       />
     </template>
     <template #content>
-      <timeline-row-initiator
-        :text="initiator"
-        :type="taskType"
-      />
-
-      <wt-chip
-        v-if="hiddenParticipants.length"
-      >
-        {{ +hiddenParticipants.length }}
-      </wt-chip>
-
-      <timeline-row-duration
-        :duration="duration"
-      />
+      <div class="chat-task-timeline-row__content">
+        <timeline-row-initiator
+          :text="taskInitiator.name"
+          :type="taskType"
+        />
+
+        <wt-chip
+          v-if="hiddenParticipants.length"
+          @click="openHiddenParticipants = !openHiddenParticipants"
+        >
+          {{ +hiddenParticipants.length }}
+        </wt-chip>
+
+        <div v-if="openHiddenParticipants">
+          <timeline-row-initiator
+            v-for="user of hiddenParticipants"
+            :text="user.name"
+          ></timeline-row-initiator>
+        </div>
+
+        <timeline-row-duration
+          :duration="duration"
+        />
+      </div>
     </template>
 
     <template #dropdown>
@@ -48,15 +58,14 @@
 </template>
 
 <script setup>
-import { computed, inject, toRefs } from 'vue';
-import { useStore } from 'vuex';
+import { computed, inject, ref, toRefs } from 'vue';
 import TimelinePin from '../../../../components/utils/timeline-pin.vue';
 import TimelineRowDuration from '../../../../components/utils/timeline-row-duration.vue';
 import TimelineRowInfo from '../../../../components/utils/timeline-row-info.vue';
 import TimelineRowInitiator from '../../../../components/utils/timeline-row-initiator.vue';
 import TimelineRow from '../../../../components/utils/timeline-row.vue';
-import TimelinePinType from '../../../../enums/TimelinePinType.enum.js';
-import TimelineTaskStatus from '../../../../enums/TimelineTaskStatus.enum.js';
+import TimelinePinTypeEnum from '../../../../enums/TimelinePinType.enum.js';
+import TimelineTaskStatusEnum from '../../../../enums/TimelineTaskStatus.enum.js';
 import ChatPointsRowSection from '../point-row/chat-points-row-section.vue';
 
 const props = defineProps({
@@ -71,35 +80,33 @@ const namespace = inject('namespace');
 const {
   createdAt,
   participants,
-  type,
   duration,
-  flowScheme,
-  queue,
+  gateway,
   id: chatId,
 } = toRefs(props.task);
 
-const store = useStore();
+const openHiddenParticipants = ref(false);
 
-const taskStatus = computed(() => {
-  return TimelineTaskStatus.STARTED;
-});
+const taskType = computed(() => gateway?.value ? TimelinePinTypeEnum.CHAT_GATEWAY : TimelinePinTypeEnum.CHAT)
 
-const taskType = computed(() => {
-  return TimelinePinType.CHAT;
+const taskInitiator = computed(() => {
+  if(taskType.value === TimelinePinTypeEnum.CHAT_GATEWAY) return gateway.value;
+  return participants.value[0]
 });
-
-const initiator = computed(() => {
-  return 'initiator';
-  // return participants.value[0];
-});
-
-const hiddenParticipants = computed(() => {
-  return [];
-  // return participants.value.filter((participant) => participant !== initiator.value);
-});
-
+const hiddenParticipants = computed(() => participants?.value?.filter(participant => participant.id !== taskInitiator.value.id));
 </script>
 
 <style lang="scss" scoped>
-
+.chat-task-timeline-row {
+  &__content {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+    width: 100%;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-1);
+    min-height: var(--spacing-2xl);
+  }
+}
 </style>