vue-intergrall-plugins 1.1.8 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

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

@@ -40,9 +40,13 @@
       <!-- Preview do link -->
       <LinkPreview v-if="link && !mapa && status != 'O'" :message="message" />
       <!-- Mensagem -->
-      <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
+      <p v-html="validateInterativity() || isInteratividadeContato() ? '' : formatMsg(message)"></p>
       <!-- Botoes da interatividade -->
-      <InteratividadeBotoes v-if="interatividade" :interatividade="interatividade" />
+      <template v-if="interatividade">
+        <InteratividadeContato v-if="isInteratividadeContato()" :interatividade="interatividade"
+          :dictionary="dictionary" :emitContactClick="emitContactClick" @contact-click="emitContactData" />
+        <InteratividadeBotoes v-else :interatividade="interatividade" :dictionary="dictionary" />
+      </template>
       <!-- Horario da mensagem -->
       <span class="horario-envio" v-text="horario"></span>
       <!-- Reenviar mensagem -->
@@ -153,6 +157,7 @@
 import AnexoMensagem from "./AnexoMensagem";
 import InteratividadeBotoes from "./InteratividadeBotoes";
 import InteratividadeFormulario from "./InteratividadeFormulario";
+import InteratividadeContato from "./InteratividadeContato";
 import Picker from "../Chat/Picker";
 import { formataTimezoneData } from "../../services/textFormatting";
 import LinkPreview from "./LinkPreview";
@@ -163,10 +168,12 @@ export default {
     AnexoMensagem,
     InteratividadeBotoes,
     InteratividadeFormulario,
+    InteratividadeContato,
     LinkPreview,
     Picker,
   },
   props: [
+    "emitContactClick",
     "smartchannel",
     "messageIndex",
     "dictionary",
@@ -385,6 +392,18 @@ export default {
         return false;
       }
     },
+    isInteratividadeContato() {
+      try {
+        if (
+          this.interatividade && this.interatividade.length && this.interatividade[0].phones
+        ) {
+          return true;
+        }
+        return false;
+      } catch (error) {
+        return false;
+      }
+    },
     validadeUrlToMsg() {
       try {
         this.message = this.msg;
@@ -458,6 +477,9 @@ export default {
     abrirImagem(imagem) {
       this.$emit("abrir-imagem", imagem);
     },
+    emitContactData(props) {
+      this.$emit("contact-click", props);
+    },
     adjustFontColor(cor) {
       try {
         var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cor);

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

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <InteratividadeContatoItem v-for="(item, index) in interatividade" :key="index" :item="item"
+      :dictionary="dictionary" :emitContactClick="emitContactClick" @contact-click="emitData" />
+  </div>
+</template>
+<script>
+import InteratividadeContatoItem from "./InteratividadeContatoItem";
+
+export default {
+  components: { InteratividadeContatoItem },
+  props: {
+    interatividade: {
+      type: Array,
+      required: true,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    emitContactClick: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  methods: {
+    emitData(props) {
+      this.$emit("contact-click", props);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,214 @@
+<template>
+  <div class="contact-card" ref="contactCard">
+    <div class="contact-header">
+      <div class="header-content">
+        <span class="badge">{{ getInitials(item.name) }}</span>
+        <h3>{{ item.name.formatted_name }}</h3>
+      </div>
+      <ul v-if="item.org" class="contact-list">
+        <li v-if="item.org.company">{{ item.org.company }}</li>
+        <li v-if="item.org.title">{{ item.org.title }}</li>
+      </ul>
+    </div>
+    <div class="contact-content">
+      <div class="contact-section">
+        <h4>
+          <fa-icon :icon="['fas', 'phone-alt']" />
+          Telefones
+        </h4>
+        <ul class="contact-list">
+          <li v-for="phone in item.phones" :key="phone.phone">
+            {{ dictionary[`${phone.type}_phone`] || phone.type }}: {{ phone.phone }}
+            <button v-if="emitContactClick" @click="emitData(phone.phone, 'phone')" title="Adicionar contato">
+              <fa-icon :icon="['fas', 'user-plus']" />
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="contact-section" v-if="item.emails && item.emails.length">
+        <h4><fa-icon :icon="['fas', 'envelope']" />Emails</h4>
+        <ul class="contact-list">
+          <li v-for="email in item.emails" :key="email.email">
+            {{ dictionary[`${email.type}_email`] || email.type }}: {{ email.email }}
+            <button v-if="emitContactClick" @click="emitData(email.email, 'email')" title="Adicionar contato">
+              <fa-icon :icon="['fas', 'user-plus']" />
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="contact-section" v-if="hasInfos">
+        <h4>
+          <fa-icon :icon="['fas', 'info']" /> {{ dictionary.titulo_informacoes }} adicionais
+        </h4>
+        <ul class="contact-list">
+          <template v-if="item.addresses && item.addresses.length">
+            <li v-for="address in item.addresses" :key="address.street">
+              {{ dictionary[`${address.type}_address`] || address.type }}: {{ address.street }}, {{ address.city }} - {{
+                address.state ? address.state.toUpperCase() : '(vazio)' }} - {{
+                address.country }}, {{
+                address.zip }}
+            </li>
+          </template>
+          <template v-if="item.urls && item.urls.length">
+            <li v-for="url in item.urls" :key="url.url">
+              {{ dictionary[url.type] || url.type }}: <a
+                :href="`${url.url.startsWith('https://') ? url.url : `https://${url.url}`}`" target="_blank">{{ url.url
+                }}</a>
+            </li>
+          </template>
+          <li v-if="item.birthday">{{ dictionary.birthday }}: {{ formatBirthday(item.birthday) }}</li>
+          <template v-if="additionals && additionals.length">
+            <li v-for="(value, key) in additionals" :key="key">
+              {{ key }}: {{ value }}
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    emitContactClick: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      additionals: [],
+      hasInfos: false,
+    }
+  },
+  mounted() {
+    this.additionals = this.getAdditionalInfo(JSON.parse(JSON.stringify(this.item)));
+    this.verifyHasInfos()
+  },
+  methods: {
+    getInitials(name) {
+      if (!name) return '';
+      const initials = name.first_name.charAt(0);
+      if (name.last_name) {
+        return initials + name.last_name.charAt(0);
+      }
+      return initials;
+    },
+    formatBirthday(birthday) {
+      if (!birthday) return '';
+      const values = birthday.split('-');
+      const month = values[values.length - 2]
+      const day = values[values.length - 1]
+      const months = [
+        'janeiro', 'fevereiro', `mar${this.dictionary.c_dil}o`, 'abril', 'maio', 'junho',
+        'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'
+      ];
+      return `${parseInt(day)} de ${months[parseInt(month) - 1]}`;
+    },
+    emitData(contact, type) {
+      this.$emit('contact-click', {
+        contact,
+        type,
+        data: JSON.parse(JSON.stringify(this.item))
+      });
+    },
+    verifyHasInfos() {
+      const keysToInclude = ['addresses', 'urls', 'birthday'];
+      this.hasInfos = Object.keys(this.item).some(key => keysToInclude.includes(key));
+    },
+    getAdditionalInfo(item) {
+      const keysToExclude = ['name', 'org', 'phones', 'emails', 'addresses', 'urls', 'birthday'];
+      return Object.keys(item)
+        .filter(key => !keysToExclude.includes(key))
+        .reduce((obj, key) => {
+          obj[key] = item[key];
+          return obj;
+        }, {});
+    }
+  },
+};
+</script>
+
+<style scoped>
+.contact-card {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 5px;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.contact-header {
+  margin-bottom: 16px;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.header-content h3 {
+  margin: 0;
+}
+
+.contact-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin: 10px 0;
+}
+
+.contact-list li>button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--konecta-success);
+}
+
+.contact-list li>button:hover {
+  color: var(--konecta-success-hover);
+}
+
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: var(--message-color);
+  color: var(--text-color);
+  text-align: center;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.contact-section {
+  margin-bottom: 16px;
+}
+
+.contact-section h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+</style>