feat: Chat header send flow when 24h alert is valid

src/components/chats/FlowsTrigger/SelectFlow.vue

@@ -39,6 +39,7 @@
 <script>
 import { unnnicCallAlert } from '@weni/unnnic-system';
 import FlowsTrigger from '@/services/api/resources/chats/flowsTrigger.js';
+import { mapState } from 'vuex';
 import ModalProgressTemplateSubmission from './ModalProgressTemplateSubmission';
 
 export default {
@@ -80,6 +81,12 @@ export default {
     },
   },
 
+  computed: {
+    ...mapState({
+      room: (state) => state.rooms.activeRoom,
+    }),
+  },
+
   methods: {
     async flows() {
       this.loadingFlows = true;
@@ -126,7 +133,7 @@ export default {
         flow: this.selectedFlow,
         groups: this.idGruops,
         contacts: this.selectedContact ? [this.selectedContact.external_id] : this.idContactsList,
-        room: this.selectedContact ? this.selectedContact.uuid : null,
+        room: this.room?.uuid,
       };
       this.openModalProgress();
       try {

src/components/chats/chat/ChatHeaderSendFlow.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="chat-header-send-flow">
+    <p>
+      {{ $t('alert_last_message_date.message') }}
+      <a
+        class="chat-header-send-flow__trigger"
+        @click="$emit('send-flow')"
+        @keypress.enter="$emit('send-flow')"
+      >
+        {{ $t('alert_last_message_date.message_send_flow') }}
+      </a>
+    </p>
+    <unnnic-tool-tip
+      enabled
+      :text="$t('alert_last_message_date.tip')"
+      side="bottom"
+      maxWidth="20rem"
+    >
+      <unnnic-icon-svg icon="alert-circle-1-1" scheme="neutral-white" size="sm" />
+    </unnnic-tool-tip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatHeaderSendFlow',
+};
+</script>
+
+<style lang="scss" scoped>
+.chat-header-send-flow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $unnnic-spacing-nano;
+
+  padding: $unnnic-spacing-nano 0;
+
+  background-color: $unnnic-color-neutral-cloudy;
+
+  color: $unnnic-color-neutral-white;
+  font-size: $unnnic-font-size-body-gt;
+  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+
+  &__trigger {
+    text-decoration: underline;
+
+    cursor: pointer;
+  }
+}
+</style>

src/views/chats/Home.vue

@@ -13,16 +13,7 @@
         :avatarName="room.contact.name"
         :close="openModalCloseChat"
       />
-      <!-- <chat-header
-        :room="room"
-        :closeButtonTooltip="$t('chats.end')"
-        @close="openModalCloseChat"
-        @show-contact-info="componentInAsideSlot = 'contactInfo'"
-        @open-select-flow="openFlowsTrigger"
-        :alert="!this.room.is_24h_valid"
-        @reconnect="searchMessages"
-        :alertNetwork="this.networkError"
-      /> -->
+      <chat-header-send-flow v-if="!room.is_24h_valid" @send-flow="openFlowsTrigger" />
       <chats-dropzone @open-file-uploader="openFileUploader" :show="room.user && room.is_24h_valid">
         <chat-messages
           :room="room"
@@ -116,7 +107,7 @@ import ChatsLayout from '@/layouts/ChatsLayout';
 import ChatsBackground from '@/layouts/ChatsLayout/components/ChatsBackground';
 import ChatsDropzone from '@/layouts/ChatsLayout/components/ChatsDropzone';
 
-import ChatHeader from '@/components/chats/chat/ChatHeader';
+import ChatHeaderSendFlow from '@/components/chats/chat/ChatHeaderSendFlow';
 import ChatMessages from '@/components/chats/chat/ChatMessagesNext';
 import ContactInfo from '@/components/chats/ContactInfo';
 import ChatClassifier from '@/components/chats/ChatClassifier';
@@ -138,7 +129,7 @@ export default {
     ChatsLayout,
     ChatsBackground,
     ChatsDropzone,
-    ChatHeader,
+    ChatHeaderSendFlow,
     ChatMessages,
     ContactInfo,
     QuickMessages,

src/views/loadings/RoomHeader.vue

@@ -16,7 +16,6 @@ export default {
 <style lang="scss" scoped>
 .room-header-loading {
   width: 100%;
-  height: 100%;
 
   z-index: 10000;