vue-wiguet-chatweb 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "files": [
     "dist",

package/src/components/Chat.vue

@@ -15,6 +15,7 @@
         :canLoadMoreMessages="messagesData.canLoadMoreMessages"
         @loadMore="getMessages"
         @retry="retryMessage"
+        @on-qualifying="(args) => onQualifying(args)"
       />
     </div>
 
@@ -70,6 +71,7 @@ import {
   getMessagesApi,
   sendMessageApi,
   setVistoToTrueApi,
+  updateMessageApi,
 } from "../store/index";
 import { getInformationApi } from "../store";
 import MessageList from "./MessageList.vue";
@@ -96,6 +98,7 @@ const emit = defineEmits([
   "new-message",
   "clear-new-messages",
   "not-viewed-total",
+  "onQualifying",
 ]);
 
 const props = defineProps({
@@ -413,6 +416,42 @@ function getOS() {
   return os;
 }
 
+function onQualifying({ message, emoji }: { message: Message, emoji: {icon: string, value: number } }) {
+  const callback =  async () => {
+    if (!message.id || !emoji) return;
+
+    const idx = searchFromLast<Message>(
+        messagesData.value.data,
+        "id",
+        message.id
+      );
+    
+    let prevMessage = messagesData.value?.data?.[idx].message
+    messagesData.value?.data?.[idx] && (messagesData.value.data[idx].message = emoji.icon);
+
+    const msg = await updateMessageApi(message.id, { message: emoji.icon, tipoCalificacionId: emoji.value }, props.tokenAuth);
+
+    if (!msg) {
+      messagesData.value?.data?.[idx] && (messagesData.value.data[idx].message = prevMessage);
+      emit("show-toast", {
+        severity: "error",
+        summary: "Error",
+        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+        life: 5000,
+      });
+      return 
+    }
+
+    socketService.value?.emit("sendMessage", {
+      roomId: information?.value?.appChat.id,
+      message,
+    });
+  }
+
+  emit('onQualifying', callback)
+};
+
+
 onMounted(async () => {
   if (appChatId.value) return;
 

package/src/components/MessageList.vue

@@ -26,7 +26,25 @@
         <div class="chat-message">
           <div class="bubble" :class="message.esCliente ? 'right' : 'left'">
             <div :class="message.esCliente ? 'content-right' : 'content-left'">
-              <div class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
+              <div v-if="message.message === '😊😄🙂😐🙁'" class="flex gap-2" >
+                <div>
+                  <strong style="display: block; margin-bottom: 0.5rem;">Ayúdanos a mejorar nuestro servicio.</strong>
+                  <span>Que le pareció la atención:</span>
+                </div>
+                <a 
+                  v-for="emoji in emojis"
+                  href="javascript:"
+                  class="btn-icon"
+                  :key="emoji.value"
+                  @click="emit('onQualifying', { message, emoji })"
+                >
+                  <div class="flex flex-col items-center">
+                    <div class="icon">{{ emoji.icon }}</div>
+                    <span>{{ emoji.label }}</span>
+                  </div>
+                </a>
+              </div>
+              <div v-else class="message-text" style="white-space: pre-line" v-html="textToRichFormat(message.message)"></div>
               <div class="detail-message flex justify-content-between">
                 <span class="mr-5" v-if="message.sender?.nombreCompleto">
                   {{
@@ -53,13 +71,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, onBeforeMount, ref, watch } from "vue";
+import { PropType, onBeforeMount, ref, watch, h } from 'vue';
 import { useIntersectionObserver } from "@vueuse/core";
 import { type Message } from "../dto/app.dto";
 import { DateTime } from "luxon";
 import DangerIcon from "./DangerIcon.vue";
 
-const emit = defineEmits(["loadMore", "retry"]);
+const emit = defineEmits(["loadMore", "retry", "onQualifying"]);
 const props = defineProps({
   messages: {
     type: Array as PropType<Message[]>,
@@ -135,6 +153,14 @@ function textToRichFormat(text: string) {
   return newMessage().replace(/--custom-tag/g, '');
 }
 
+const emojis = [
+  { label: 'Excelente', value: 1,  icon: '😊' },
+  { label: 'Buena', value: 2,  icon: '😄' },
+  { label: 'Aceptable', value: 3,  icon: '🙂' },
+  { label: 'Mala', value: 4,  icon: '😐' },
+  { label: 'Muy Mala', value: 5, icon: '🙁' },
+]
+
 </script>
 
 <style scoped>
@@ -260,4 +286,32 @@ function textToRichFormat(text: string) {
 .messages-container-list {
   width: 100%;
 }
+
+.btn-icon {
+  text-decoration: none;
+  border: none;
+}
+.btn-icon span {
+  color: currentColor;
+  text-wrap: nowrap;
+}
+
+.btn-icon .icon {
+  font-size: 2rem;
+}
+
+.flex { 
+  display: flex;
+  flex-wrap: wrap;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.gap-2 {
+  gap: 0.5rem;
+}
+
 </style>

package/src/components/Widget.vue

@@ -50,6 +50,7 @@
         @clear-new-messages="newMessages = 0"
         @new-message="() => newMessages++"
         @not-viewed-total="(val) => (newMessages = val)"
+        @on-qualifying="(args)=> emit('onQualifying', args)"
       />
     </div>
   </div>
@@ -63,7 +64,7 @@ import IconTelegram from "./IconTelegram.vue";
 import IconWhatsApp from "./IconWhatsApp.vue";
 import IconChat from "./IconChat.vue";
 
-const emit = defineEmits(["show-toast", "show-confirm"]);
+const emit = defineEmits(["show-toast", "show-confirm", "onQualifying"]);
 
 const enum MeansCommunication{
   WHATSAPP,