vue-intergrall-plugins 1.1.10 → 1.1.12

package/src/lib-components/Messages/CardMessages.vue

@@ -1,684 +1,687 @@
-<template>
-  <div v-if="origem"
-    :class="`${msgNova ? 'msgNova' : `${origem === 'outros' ? 'card-cli' : 'card-ope'} ${customClass || ''}`}`"
-    :id="`a${messageIndex ? messageIndex : randomizeValue}`">
-    <transition name="fade">
-      <span v-if="msgNova" class="novas-mensagens"> Nova mensagem </span>
-    </transition>
-    <div class="card box-shadow">
-      <div class="card-header">
-        <div class="card-autor">
-          <fa-icon :icon="iconAutor" />
-          <p class="text-bold" v-if="autor" v-text="`${tratarTextoLongo(autor)}`" :title="autor"></p>
-          <p v-if="origem === 'principal' && autor && login" v-text="returnLoginText" :title="returnLoginText"></p>
-        </div>
-        <div class="card-right">
-          <div class="card-datas">
-            <div v-if="data_cri" class="card-data" :title="`${dictionary.data_criacao}: ${origem === 'outros'
-              ? formataTimezoneData(data_cri)
-              : returnFormataDataHora(data_cri)
-              }`">
-              <span v-text="origem === 'outros'
-                ? formataTimezoneData(data_cri)
-                : returnFormataDataHora(data_cri)
-                "></span>
-            </div>
-            <div v-if="data_mod" class="card-data" :title="`${dictionary.data_mod}: ${origem === 'outros'
-              ? formataTimezoneData(data_mod)
-              : returnFormataDataHora(data_mod)
-              }`">
-              <span v-text="origem === 'outros'
-                ? formataTimezoneData(data_mod)
-                : returnFormataDataHora(data_mod)
-                "></span>
-            </div>
-          </div>
-          <div class="card-expand" @click="expandirCard()" v-if="hasExpand" v-tippy :content="'Expandir mensagem'">
-            <fa-icon :icon="['fas', 'expand-alt']" />
-          </div>
-          <div class="card-actions" v-if="customButtons && customButtons.length">
-            <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
-              @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
-              v-tippy :content="button.tippyContent">
-              <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
-              <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
-            </span>
-          </div>
-        </div>
-      </div>
-      <div class="card-chip-container">
-        <p class="card-chip" :class="[ticketClassCod]" v-if="ticket_id.cod && ticket_id.desc"
-          v-text="`${ticket_id.desc} (${ticket_id.cod})`" :title="`${ticket_id.desc} (${ticket_id.cod})`"></p>
-        <p v-if="ticket_id.hasOwnProperty('back_doing_business')"
-          :class="`${ticket_id.back_doing_business ? 'green' : 'red'} card-chip`" :title="`${dictionary.title_voltaria_fazer_negocio} ${ticket_id.back_doing_business
-            ? `${dictionary.title_sim}`
-            : `${dictionary.title_nao}`
-            }`" v-text="`${dictionary.title_voltaria_fazer_negocio} ${ticket_id.back_doing_business
-              ? `${dictionary.title_sim}`
-              : `${dictionary.title_nao}`
-              }`
-              "></p>
-        <p v-if="ticket_id.hasOwnProperty('rating')" :class="`${isNumberBiggerThanSix ? 'green' : 'red'} card-chip`"
-          :title="`${dictionary.title_avaliacao} ${ticket_id.rating}`"
-          v-text="`${dictionary.title_avaliacao} ${ticket_id.rating}`"></p>
-        <p v-if="ticket_id.hasOwnProperty('resolved_issue')"
-          :class="`${ticket_id.resolved_issue ? 'green' : 'red'} card-chip`" :title="`${dictionary.title_problema_resolvido} ${ticket_id.resolved_issue
-            ? `${dictionary.title_sim}`
-            : `${dictionary.title_nao}`
-            }`" v-text="`${dictionary.title_problema_resolvido} ${ticket_id.resolved_issue
-              ? `${dictionary.title_sim}`
-              : `${dictionary.title_nao}`
-              }`
-              "></p>
-      </div>
-      <p class="card-message" v-html="mensagemFormatada"></p>
-      <div class="card-interatividade" v-if="filteredInteratividadeData && filteredInteratividadeData.length">
-        <p class="card-interatividade-title">{{ dictionary.ra_infos_interatividade }}:</p>
-        <ul class="card-interatividade-list">
-          <li v-for="(values, index) in filteredInteratividadeData" :key="index">
-            <p v-for="(value, key) in values" :key="key">
-              <span v-if="key.indexOf(dictionary.ra_ask_avaliation_title) <= -1"
-                v-html="formatInteratividadeValue(key, value)"></span>
-              <span v-else>
-                <strong v-text="`${key}:`"></strong>
-                <button @click="sendLink(filteredInteratividadeData[index])" class="box-shadow" v-text="value"></button>
-              </span>
-            </p>
-            <hr />
-          </li>
-        </ul>
-      </div>
-      <div class="card-footer" v-if="anexos && anexos.length">
-        <div class="card-anexo" v-for="(anexo, index) in anexos" :key="`${index}`">
-          <CardAttachment :anexo="anexo" :dictionary="dictionary" :dominio="dominio" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { textoLongo } from "@/mixins/formatarTexto";
-import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
-import CardAttachment from "./CardAttachment";
-
-export default {
-  components: { CardAttachment },
-  props: {
-    dictionary: {
-      type: Object,
-      required: true,
-    },
-    messageIndex: {
-      type: [Number, String],
-      required: true,
-    },
-    dominio: {
-      type: String,
-      required: true,
-    },
-    hasExpand: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    origem: {
-      type: String,
-      required: true,
-    },
-    autor: {
-      type: String,
-    },
-    login: {
-      type: String,
-    },
-    mensagem: {
-      type: String,
-    },
-    anexos: {
-      type: Array,
-    },
-    data_cri: {
-      type: String,
-    },
-    data_mod: {
-      type: String,
-    },
-    ticket_id: {
-      type: Object,
-    },
-    ticket_name: {
-      type: String,
-    },
-    msgNova: {
-      type: Boolean,
-    },
-    customClass: {
-      type: String
-    },
-    customButtons: {
-      type: Array
-    },
-    origemExterna: {
-      type: String,
-    },
-    interatividade: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  mixins: [textoLongo],
-  computed: {
-    randomizeValue() {
-      return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
-    },
-    mensagemFormatada() {
-      if (this.mensagem) {
-        const regex = /(\n|&nbsp;)/g;
-        if (regex.test(this.mensagem)) return this.mensagem.replace(regex, "<br>");
-      }
-      return this.mensagem;
-    },
-    iconAutor() {
-      return this.origem === "outros" ? ["fas", "user"] : ["fas", "headset"];
-    },
-    returnLoginText() {
-      if (!this.login) return "";
-      if (this.autor) return ` (${this.login})`;
-      return `${this.login}`;
-    },
-    ticketClassCod() {
-      if (!this.ticket_id || !this.ticket_id.cod) return "";
-      const { cod } = this.ticket_id;
-      switch (cod) {
-        case 17:
-        case "17":
-        case 9:
-        case "9":
-        case 8:
-        case "8":
-        case "CANCELADA":
-          return "red";
-        case 3:
-        case "3":
-        case 6:
-        case "6":
-        case "AGENDADA":
-          return "yellow";
-        default:
-          return "";
-      }
-    },
-    isNumberBiggerThanSix() {
-      if (!this.ticket_id || !this.ticket_id.rating) return false;
-      try {
-        return parseInt(this.ticket_id.rating) > 6;
-      } catch (err) {
-        return false;
-      }
-    },
-    filteredInteratividadeData() {
-      if (!this.interatividade || !this.interatividade.length) return [];
-      const finalData = [];
-      const validKeys = [
-        "name",
-        "value",
-        // "ticket_detail_id",
-        // "ticket_detail_type_id",
-        // "creation_date",
-        // "modification_date",
-      ];
-      const validIds = [7];
-      this.interatividade.forEach((values) => {
-        if (validIds.includes(values.ticket_detail_type_id)) {
-          const currentKeys = Object.keys(values);
-          const formattedValues = {};
-          if (values.name && values.value) {
-            formattedValues[values.name] = values.value;
-          }
-          currentKeys.forEach((key) => {
-            if (validKeys.includes(key)) {
-              let formattedKey = "";
-              // if (key === "ticket_detail_id") {
-              //   formattedKey = this.dictionary.ra_ticket_detail_id_title;
-              // } else if (key === "ticket_detail_type_id") {
-              //   formattedKey = this.dictionary.ra_ticket_detail_type_id_title;
-              // } else if (key === "creation_date") {
-              //   formattedKey = this.dictionary.ra_creation_date_title;
-              // } else if (key === "modification_date") {
-              //   formattedKey = this.dictionary.ra_creation_modification_title;
-              // }
-              if (formattedKey) {
-                formattedValues[formattedKey] = values[key];
-              }
-            }
-          });
-          if (values.ticket_detail_type_id === 25) {
-            formattedValues[
-              this.dictionary.ra_ask_avaliation_title
-            ] = this.dictionary.ra_ask_avaliation_text;
-          }
-          finalData.push(formattedValues);
-        }
-      });
-
-      return finalData;
-    },
-  },
-  methods: {
-    formataTimezoneData(timezoneData) {
-      return formataTimezoneData(timezoneData);
-    },
-    returnFormataDataHora(dataHora) {
-      return formataDataHora(dataHora, false, false, this.dictionary);
-    },
-    expandirCard() {
-      this.$emit("expand-card", this.$props);
-      // this.$store.dispatch("informacoesCardExpandido", this.$props)
-      // this.$store.dispatch("toggleBlocker", { state: true, origin: "expandir-card-reclamacao"})
-    },
-    formatInteratividadeValue(key, value) {
-      const regexISO8601 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
-      if (regexISO8601.test(value)) {
-        const data = new Date(value);
-        const dia = String(data.getDate()).padStart(2, "0");
-        const mes = String(data.getMonth() + 1).padStart(2, "0");
-        const ano = data.getFullYear();
-        const horas = String(data.getHours()).padStart(2, "0");
-        const minutos = String(data.getMinutes()).padStart(2, "0");
-
-        value = `${dia}/${mes}/${ano} ${horas}:${minutos}`;
-      }
-      return `<strong>${key}:</strong> ${value || "---"}`;
-    },
-    sendLink(obj) {
-      this.$emit("send-avaliation-link", obj);
-    },
-    returnParams(params) {
-      const defaultParams = {
-        message: this.mensagem,
-      };
-
-      if (!params) return defaultParams;
-
-      const keys = params.instanceKeys.split("|");
-      if (!keys || !keys.length)
-        return {
-          defaultParams,
-          ...params.values,
-        };
-
-      const customParams = { ...params.values };
-      keys.forEach((key) => {
-        if (this[key]) customParams[key] = this[key];
-        else console.warn(`Cant find ${key} on 'this' instance`);
-      });
-
-      return Object.keys(customParams).length ? customParams : defaultParams;
-    }
-  },
-};
-</script>
-
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 200ms;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.card-cli,
-.card-ope {
-  display: flex;
-  width: 95%;
-  margin: 5px 0;
-  position: relative;
-}
-
-.card-cli.msgNova,
-.card-ope.msgNova {
-  margin-top: 30px;
-}
-
-.novas-mensagens {
-  position: absolute;
-  top: -30px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 2.5px 0;
-  background-color: lighten(#fff249, 15);
-}
-
-.card-cli .card {
-  border-left: 3px solid #90b823;
-}
-
-.card-ope {
-  align-self: flex-end;
-  background-color: lighten(#007535, 72);
-}
-
-.card-ope .card {
-  border-right: 3px solid #007535;
-}
-
-.card {
-  background-color: rgba(255, 255, 255, 0.9);
-  overflow: hidden;
-  width: 100%;
-  padding: 2.5px 5px;
-  border-radius: 7px;
-  box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 3px 0px;
-}
-
-.card p {
-  word-break: break-all;
-}
-
-.card-header {
-  width: 100%;
-  border-bottom: 1px solid #ddd;
-  margin-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 5px;
-}
-
-.card-header svg {
-  font-size: 16px;
-}
-
-.card-canal {
-  flex: 1;
-  margin-right: 10px;
-}
-
-.card-datas {
-  display: flex;
-  flex-direction: column;
-  margin-right: 10px;
-  background: rgb(0, 136, 69);
-  padding: 5px 10px;
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-  color: #fff;
-}
-
-.card-right {
-  margin-right: -20px;
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-}
-
-.card-data {
-  overflow: hidden;
-  display: flex;
-  align-content: center;
-}
-
-.card-data span {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.card-data svg {
-  margin-right: 5px;
-  color: #232323;
-}
-
-.card-actions {
-  display: flex;
-  gap: 7px;
-}
-
-.menu-mensagem {
-  cursor: pointer;
-  padding: 1px;
-}
-
-.card-expand {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 10px;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 150ms;
-}
-
-.card-expand:hover {
-  opacity: 1;
-}
-
-.card-footer {
-  margin-top: 5px;
-  border-top: 1px solid #ddd;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.card-chip-container {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 5px;
-}
-
-.card-autor {
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  overflow: hidden;
-  min-width: 14px;
-  max-width: calc(100% - 215px);
-  gap: 5px;
-}
-
-.card-chip {
-  font-size: 12.8px;
-  width: fit-content;
-  border-radius: 15px;
-  transition: all 150ms ease-in-out;
-  padding: 2.5px 7px;
-  color: rgb(31, 105, 193);
-  background-color: rgba(207, 216, 244, 0.6);
-  margin-bottom: 5px;
-}
-
-.card-chip:hover {
-  background-color: rgba(207, 216, 244, 1);
-}
-
-.card-chip.orange {
-  color: #e14924;
-  background-color: rgba(228, 92, 58, 0.15);
-}
-
-.card-chip.orange:hover {
-  background-color: rgba(228, 92, 58, 0.2);
-}
-
-.card-chip.yellow {
-  color: #f4a304;
-  background-color: rgba(252, 191, 73, 0.15);
-}
-
-.card-chip.yellow:hover {
-  background-color: rgba(252, 191, 73, 0.2);
-}
-
-.card-chip.red {
-  color: rgb(231, 76, 60);
-  background-color: rgba(231, 76, 60, 0.2);
-}
-
-.card-chip.red:hover {
-  background-color: rgba(231, 76, 60, 0.25);
-}
-
-.card-chip.green {
-  color: #0e3213;
-  background-color: rgba(15, 177, 39, 0.3);
-}
-
-.card-chip.green:hover {
-  background-color: rgba(15, 177, 39, 0.4);
-}
-
-.card-anexo {
-  width: 50px;
-  height: 50px;
-  margin-right: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.anexo-item {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.anexo-item .transition-anexo-item {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.anexo-item .req-loader {
-  position: absolute;
-  top: calc(50% - 12.5px);
-  right: calc(50% - 12.5px);
-}
-
-.anexo-item .transition-anexo-item img {
-  max-width: 45px;
-  max-height: 45px;
-}
-
-.anexo-icone {
-  opacity: 0.9;
-  transition: opacity 200ms;
-  color: #222;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.anexo-icone:hover {
-  opacity: 1;
-}
-
-.anexo-icone:visited {
-  color: inherit;
-}
-
-svg {
-  font-size: 30px;
-  z-index: 1;
-}
-
-.anexo-icone.pdf {
-  position: relative;
-}
-
-.anexo-icone.pdf svg {
-  color: rgb(231, 76, 60);
-}
-
-.anexo-icone.pdf::after {
-  content: "";
-  position: absolute;
-  bottom: 2px;
-  transform: translateY(2px);
-  width: 20px;
-  height: 20px;
-  background-color: #fff;
-}
-
-.anexo-icone.doc {
-  color: #15517f;
-}
-
-.anexo-icone.doc::after {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: #fff;
-}
-
-.anexo-img {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 2.5px;
-  cursor: pointer;
-  opacity: 0.9;
-  transition: opacity 150ms;
-}
-
-.anexo-img:hover {
-  opacity: 1;
-}
-
-.anexo-img img {
-  width: 95%;
-}
-
-.card-interatividade {
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-  margin-bottom: 5px;
-  font-size: 14.4px;
-}
-
-.card-interatividade-title {
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
-.card-interatividade-list {
-  margin: 0;
-  padding: 0;
-  font-size: 14.4px;
-}
-
-.card-interatividade-list hr {
-  height: 1px;
-  background-color: #ccc;
-  width: 100%;
-  border: 0;
-}
-
-.card-interatividade-list button {
-  margin-left: 5px;
-  border-radius: 5px;
-  border: unset;
-  cursor: pointer;
-  padding: 5px 10px;
-  background-color: #b5f778;
-}
-
-.card-interatividade-list button:hover {
-  text-decoration: underline;
-}
-</style>
+<template>
+  <div v-if="origem"
+    :class="`${msgNova ? 'msgNova' : `${origem === 'outros' ? 'card-cli' : 'card-ope'} ${customClass || ''}`}`"
+    :id="`a${messageIndex ? messageIndex : randomizeValue}`">
+    <transition name="fade">
+      <span v-if="msgNova" class="novas-mensagens"> Nova mensagem </span>
+    </transition>
+    <div class="card box-shadow">
+      <div class="card-header">
+        <div class="card-autor">
+          <fa-icon :icon="iconAutor" />
+          <p class="text-bold" v-if="autor" v-text="`${tratarTextoLongo(autor)}`" :title="autor"></p>
+          <p v-if="origem === 'principal' && autor && login" v-text="returnLoginText" :title="returnLoginText"></p>
+        </div>
+        <div class="card-right">
+          <div class="card-datas">
+            <div v-if="data_cri" class="card-data" :title="data_cri === data_mod ? `${dictionary.data_criacao} e ${dictionary.data_mod}: ${origem === 'outros'
+              ? formataTimezoneData(data_cri)
+              : returnFormataDataHora(data_cri)
+              }` : `${dictionary.data_criacao}: ${origem === 'outros'
+                ? formataTimezoneData(data_cri)
+                : returnFormataDataHora(data_cri)
+              }`">
+              <span v-text="origem === 'outros'
+                ? formataTimezoneData(data_cri)
+                : returnFormataDataHora(data_cri)
+                "></span>
+            </div>
+            <div v-if="data_mod && data_mod !== data_cri" class="card-data" :title="`${dictionary.data_mod}: ${origem === 'outros'
+              ? formataTimezoneData(data_mod)
+              : returnFormataDataHora(data_mod)
+              }`">
+              <span v-text="origem === 'outros'
+                ? formataTimezoneData(data_mod)
+                : returnFormataDataHora(data_mod)
+                "></span>
+            </div>
+          </div>
+          <div class="card-expand" @click="expandirCard()" v-if="hasExpand" v-tippy :content="'Expandir mensagem'">
+            <fa-icon :icon="['fas', 'expand-alt']" />
+          </div>
+          <div class="card-actions" v-if="customButtons && customButtons.length">
+            <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
+              @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
+              v-tippy :content="button.tippyContent">
+              <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+              <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="card-chip-container">
+        <p class="card-chip" :class="[ticketClassCod]" v-if="ticket_id.cod && ticket_id.desc"
+          v-text="`${ticket_id.desc} (${ticket_id.cod})`" :title="`${ticket_id.desc} (${ticket_id.cod})`"></p>
+        <p v-if="ticket_id.hasOwnProperty('back_doing_business')"
+          :class="`${ticket_id.back_doing_business ? 'green' : 'red'} card-chip`" :title="`${dictionary.title_voltaria_fazer_negocio} ${ticket_id.back_doing_business
+            ? `${dictionary.title_sim}`
+            : `${dictionary.title_nao}`
+            }`" v-text="`${dictionary.title_voltaria_fazer_negocio} ${ticket_id.back_doing_business
+              ? `${dictionary.title_sim}`
+              : `${dictionary.title_nao}`
+              }`
+              "></p>
+        <p v-if="ticket_id.hasOwnProperty('rating')" :class="`${isNumberBiggerThanSix ? 'green' : 'red'} card-chip`"
+          :title="`${dictionary.title_avaliacao} ${ticket_id.rating}`"
+          v-text="`${dictionary.title_avaliacao} ${ticket_id.rating}`"></p>
+        <p v-if="ticket_id.hasOwnProperty('resolved_issue')"
+          :class="`${ticket_id.resolved_issue ? 'green' : 'red'} card-chip`" :title="`${dictionary.title_problema_resolvido} ${ticket_id.resolved_issue
+            ? `${dictionary.title_sim}`
+            : `${dictionary.title_nao}`
+            }`" v-text="`${dictionary.title_problema_resolvido} ${ticket_id.resolved_issue
+              ? `${dictionary.title_sim}`
+              : `${dictionary.title_nao}`
+              }`
+              "></p>
+      </div>
+      <p class="card-message" v-html="mensagemFormatada"></p>
+      <div class="card-interatividade" v-if="filteredInteratividadeData && filteredInteratividadeData.length">
+        <p class="card-interatividade-title">{{ dictionary.ra_infos_interatividade }}:</p>
+        <ul class="card-interatividade-list">
+          <li v-for="(values, index) in filteredInteratividadeData" :key="index">
+            <p v-for="(value, key) in values" :key="key">
+              <span v-if="key.indexOf(dictionary.ra_ask_avaliation_title) <= -1"
+                v-html="formatInteratividadeValue(key, value)"></span>
+              <span v-else>
+                <strong v-text="`${key}:`"></strong>
+                <button @click="sendLink(filteredInteratividadeData[index])" class="box-shadow" v-text="value"></button>
+              </span>
+            </p>
+            <hr />
+          </li>
+        </ul>
+      </div>
+      <div class="card-footer" v-if="anexos && anexos.length">
+        <div class="card-anexo" v-for="(anexo, index) in anexos" :key="`${index}`">
+          <CardAttachment :anexo="anexo" :dictionary="dictionary" :dominio="dominio" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { textoLongo } from "@/mixins/formatarTexto";
+import { formataTimezoneData, formataDataHora } from "../../services/textFormatting";
+import CardAttachment from "./CardAttachment";
+
+export default {
+  components: { CardAttachment },
+  props: {
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    messageIndex: {
+      type: [Number, String],
+      required: true,
+    },
+    dominio: {
+      type: String,
+      required: true,
+    },
+    hasExpand: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    origem: {
+      type: String,
+      required: true,
+    },
+    autor: {
+      type: String,
+    },
+    login: {
+      type: String,
+    },
+    mensagem: {
+      type: String,
+    },
+    anexos: {
+      type: Array,
+    },
+    data_cri: {
+      type: String,
+    },
+    data_mod: {
+      type: String,
+    },
+    ticket_id: {
+      type: Object,
+    },
+    ticket_name: {
+      type: String,
+    },
+    msgNova: {
+      type: Boolean,
+    },
+    customClass: {
+      type: String
+    },
+    customButtons: {
+      type: Array
+    },
+    origemExterna: {
+      type: String,
+    },
+    interatividade: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  mixins: [textoLongo],
+  computed: {
+    randomizeValue() {
+      return `${Math.floor(Math.random() * 7770)}${Date.now()}`;
+    },
+    mensagemFormatada() {
+      if (this.mensagem) {
+        const regex = /(\n|&nbsp;)/g;
+        if (regex.test(this.mensagem)) return this.mensagem.replace(regex, "<br>");
+      }
+      return this.mensagem;
+    },
+    iconAutor() {
+      return this.origem === "outros" ? ["fas", "user"] : ["fas", "headset"];
+    },
+    returnLoginText() {
+      if (!this.login) return "";
+      if (this.autor) return ` (${this.login})`;
+      return `${this.login}`;
+    },
+    ticketClassCod() {
+      if (!this.ticket_id || !this.ticket_id.cod) return "";
+      const { cod } = this.ticket_id;
+      switch (cod) {
+        case 17:
+        case "17":
+        case 9:
+        case "9":
+        case 8:
+        case "8":
+        case "CANCELADA":
+          return "red";
+        case 3:
+        case "3":
+        case 6:
+        case "6":
+        case "AGENDADA":
+          return "yellow";
+        default:
+          return "";
+      }
+    },
+    isNumberBiggerThanSix() {
+      if (!this.ticket_id || !this.ticket_id.rating) return false;
+      try {
+        return parseInt(this.ticket_id.rating) > 6;
+      } catch (err) {
+        return false;
+      }
+    },
+    filteredInteratividadeData() {
+      if (!this.interatividade || !this.interatividade.length) return [];
+      const finalData = [];
+      const validKeys = [
+        "name",
+        "value",
+        // "ticket_detail_id",
+        // "ticket_detail_type_id",
+        // "creation_date",
+        // "modification_date",
+      ];
+      const validIds = [7];
+      this.interatividade.forEach((values) => {
+        if (validIds.includes(values.ticket_detail_type_id)) {
+          const currentKeys = Object.keys(values);
+          const formattedValues = {};
+          if (values.name && values.value) {
+            formattedValues[values.name] = values.value;
+          }
+          currentKeys.forEach((key) => {
+            if (validKeys.includes(key)) {
+              let formattedKey = "";
+              // if (key === "ticket_detail_id") {
+              //   formattedKey = this.dictionary.ra_ticket_detail_id_title;
+              // } else if (key === "ticket_detail_type_id") {
+              //   formattedKey = this.dictionary.ra_ticket_detail_type_id_title;
+              // } else if (key === "creation_date") {
+              //   formattedKey = this.dictionary.ra_creation_date_title;
+              // } else if (key === "modification_date") {
+              //   formattedKey = this.dictionary.ra_creation_modification_title;
+              // }
+              if (formattedKey) {
+                formattedValues[formattedKey] = values[key];
+              }
+            }
+          });
+          if (values.ticket_detail_type_id === 25) {
+            formattedValues[
+              this.dictionary.ra_ask_avaliation_title
+            ] = this.dictionary.ra_ask_avaliation_text;
+          }
+          finalData.push(formattedValues);
+        }
+      });
+
+      return finalData;
+    },
+  },
+  methods: {
+    formataTimezoneData(timezoneData) {
+      return formataTimezoneData(timezoneData);
+    },
+    returnFormataDataHora(dataHora) {
+      return formataDataHora(dataHora, false, false, this.dictionary);
+    },
+    expandirCard() {
+      this.$emit("expand-card", this.$props);
+      // this.$store.dispatch("informacoesCardExpandido", this.$props)
+      // this.$store.dispatch("toggleBlocker", { state: true, origin: "expandir-card-reclamacao"})
+    },
+    formatInteratividadeValue(key, value) {
+      const regexISO8601 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+      if (regexISO8601.test(value)) {
+        const data = new Date(value);
+        const dia = String(data.getDate()).padStart(2, "0");
+        const mes = String(data.getMonth() + 1).padStart(2, "0");
+        const ano = data.getFullYear();
+        const horas = String(data.getHours()).padStart(2, "0");
+        const minutos = String(data.getMinutes()).padStart(2, "0");
+
+        value = `${dia}/${mes}/${ano} ${horas}:${minutos}`;
+      }
+      return `<strong>${key}:</strong> ${value || "---"}`;
+    },
+    sendLink(obj) {
+      this.$emit("send-avaliation-link", obj);
+    },
+    returnParams(params) {
+      const defaultParams = {
+        message: this.mensagem,
+      };
+
+      if (!params) return defaultParams;
+
+      const keys = params.instanceKeys.split("|");
+      if (!keys || !keys.length)
+        return {
+          defaultParams,
+          ...params.values,
+        };
+
+      const customParams = { ...params.values };
+      keys.forEach((key) => {
+        if (this[key]) customParams[key] = this[key];
+        else console.warn(`Cant find ${key} on 'this' instance`);
+      });
+
+      return Object.keys(customParams).length ? customParams : defaultParams;
+    }
+  },
+};
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.card-cli,
+.card-ope {
+  display: flex;
+  width: 95%;
+  margin: 5px 0;
+  position: relative;
+}
+
+.card-cli.msgNova,
+.card-ope.msgNova {
+  margin-top: 30px;
+}
+
+.novas-mensagens {
+  position: absolute;
+  top: -30px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2.5px 0;
+  background-color: lighten(#fff249, 15);
+}
+
+.card-cli .card {
+  border-left: 3px solid #90b823;
+}
+
+.card-ope {
+  align-self: flex-end;
+  background-color: lighten(#007535, 72);
+}
+
+.card-ope .card {
+  border-right: 3px solid #007535;
+}
+
+.card {
+  background-color: rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+  width: 100%;
+  padding: 2.5px 5px;
+  border-radius: 7px;
+  box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 3px 0px;
+}
+
+.card p {
+  word-break: break-all;
+}
+
+.card-header {
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 5px;
+}
+
+.card-header svg {
+  font-size: 16px;
+}
+
+.card-canal {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.card-datas {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  background: rgb(0, 136, 69);
+  padding: 5px 10px;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  color: #fff;
+}
+
+.card-right {
+  margin-right: -20px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.card-data {
+  overflow: hidden;
+  display: flex;
+  align-content: center;
+}
+
+.card-data span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.card-data svg {
+  margin-right: 5px;
+  color: #232323;
+}
+
+.card-actions {
+  display: flex;
+  gap: 7px;
+}
+
+.menu-mensagem {
+  cursor: pointer;
+  padding: 1px;
+}
+
+.card-expand {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 10px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 150ms;
+}
+
+.card-expand:hover {
+  opacity: 1;
+}
+
+.card-footer {
+  margin-top: 5px;
+  border-top: 1px solid #ddd;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card-chip-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 5px;
+}
+
+.card-autor {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  overflow: hidden;
+  min-width: 14px;
+  max-width: calc(100% - 215px);
+  gap: 5px;
+}
+
+.card-chip {
+  font-size: 12.8px;
+  width: fit-content;
+  border-radius: 15px;
+  transition: all 150ms ease-in-out;
+  padding: 2.5px 7px;
+  color: rgb(31, 105, 193);
+  background-color: rgba(207, 216, 244, 0.6);
+  margin-bottom: 5px;
+}
+
+.card-chip:hover {
+  background-color: rgba(207, 216, 244, 1);
+}
+
+.card-chip.orange {
+  color: #e14924;
+  background-color: rgba(228, 92, 58, 0.15);
+}
+
+.card-chip.orange:hover {
+  background-color: rgba(228, 92, 58, 0.2);
+}
+
+.card-chip.yellow {
+  color: #f4a304;
+  background-color: rgba(252, 191, 73, 0.15);
+}
+
+.card-chip.yellow:hover {
+  background-color: rgba(252, 191, 73, 0.2);
+}
+
+.card-chip.red {
+  color: rgb(231, 76, 60);
+  background-color: rgba(231, 76, 60, 0.2);
+}
+
+.card-chip.red:hover {
+  background-color: rgba(231, 76, 60, 0.25);
+}
+
+.card-chip.green {
+  color: #0e3213;
+  background-color: rgba(15, 177, 39, 0.3);
+}
+
+.card-chip.green:hover {
+  background-color: rgba(15, 177, 39, 0.4);
+}
+
+.card-anexo {
+  width: 50px;
+  height: 50px;
+  margin-right: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.anexo-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.anexo-item .transition-anexo-item {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.anexo-item .req-loader {
+  position: absolute;
+  top: calc(50% - 12.5px);
+  right: calc(50% - 12.5px);
+}
+
+.anexo-item .transition-anexo-item img {
+  max-width: 45px;
+  max-height: 45px;
+}
+
+.anexo-icone {
+  opacity: 0.9;
+  transition: opacity 200ms;
+  color: #222;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.anexo-icone:hover {
+  opacity: 1;
+}
+
+.anexo-icone:visited {
+  color: inherit;
+}
+
+svg {
+  font-size: 30px;
+  z-index: 1;
+}
+
+.anexo-icone.pdf {
+  position: relative;
+}
+
+.anexo-icone.pdf svg {
+  color: rgb(231, 76, 60);
+}
+
+.anexo-icone.pdf::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+}
+
+.anexo-icone.doc {
+  color: #15517f;
+}
+
+.anexo-icone.doc::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+}
+
+.anexo-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 2.5px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 150ms;
+}
+
+.anexo-img:hover {
+  opacity: 1;
+}
+
+.anexo-img img {
+  width: 95%;
+}
+
+.card-interatividade {
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  font-size: 14.4px;
+}
+
+.card-interatividade-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.card-interatividade-list {
+  margin: 0;
+  padding: 0;
+  font-size: 14.4px;
+}
+
+.card-interatividade-list hr {
+  height: 1px;
+  background-color: #ccc;
+  width: 100%;
+  border: 0;
+}
+
+.card-interatividade-list button {
+  margin-left: 5px;
+  border-radius: 5px;
+  border: unset;
+  cursor: pointer;
+  padding: 5px 10px;
+  background-color: #b5f778;
+}
+
+.card-interatividade-list button:hover {
+  text-decoration: underline;
+}
+</style>