vue-intergrall-plugins 1.1.10 → 1.1.12

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

@@ -1,199 +1,199 @@
-<template>
-  <div class="interatividade">
-    <div v-if="
-      interatividade &&
-      interatividade.parameters &&
-      interatividade.parameters.button &&
-      interatividade.parameters.button.length
-    ">
-      <div v-for="(button, index) in interatividade.parameters.button" :key="index" class="interatividade-btn">
-        <p v-if="!button.url" v-html="button.text" class="interatividade-titulo"></p>
-        <a v-else :href="button.url" target="_blank" rel="noreferrer noopener" class="interatividade-link">
-          <p v-html="button.text" class="interatividade-titulo"></p>
-          <fa-icon :icon="['fas', 'external-link-square-alt']" />
-        </a>
-      </div>
-    </div>
-
-    <!-- Tudo aqui abaixo TEORICAMENTE e antigo e nao devera mais cair nas situacoes -->
-    <div v-if="
-      interatividade &&
-      interatividade.parameters &&
-      interatividade.parameters.button &&
-      (interatividade.parameters.button.type === 'dynamicURL' ||
-        interatividade.parameters.button.type === 'staticURL')
-    " class="interatividade-btn">
-      <a :href="interatividade.parameters.button.text" target="_blank" rel="noreferrer noopener"
-        class="interatividade-link">
-        Acessar <fa-icon :icon="['fas', 'external-link-square-alt']" />
-      </a>
-    </div>
-    <div v-if="
-      interatividade &&
-      interatividade.parameters &&
-      interatividade.parameters.button &&
-      interatividade.parameters.button.type === 'phoneNumber'
-    " class="interatividade-btn">
-      <p class="interatividade-titulo"
-        :title="`${interatividade.parameters.button.text} (${interatividade.parameters.button.phoneNumber})`" v-text="`${interatividade.parameters.button.text} (${interatividade.parameters.button.phoneNumber})`
-          "></p>
-    </div>
-    <div v-if="
-      interatividade &&
-      interatividade.parameters &&
-      interatividade.parameters.button &&
-      interatividade.parameters.button.type === 'quickReply'
-    " class="interatividade-btn">
-      <p class="interatividade-titulo" :title="`${interatividade.parameters.button.text}`"
-        v-text="`${interatividade.parameters.button.text}`"></p>
-    </div>
-    <transition name="show-x">
-      <InteratividadePopup v-if="listaEstaAberta" :lista="listaExpandida" :titulo="objItens.list.title"
-        @close="listaEstaAberta = false" />
-    </transition>
-    <template v-if="arrBotoes.length">
-      <div v-for="(btn, index) in arrBotoes" :key="index" :title="btn.titulo" class="interatividade-btn">
-        <p v-html="btn.titulo" class="interatividade-titulo"></p>
-      </div>
-    </template>
-    <template v-else-if="Object.keys(objItens).length">
-      <div class="interatividade-lista" :class="tipoBotoes == 'listItem' ? 'bg-none' : ''">
-        <div class="interatividade-lista-conteudo"
-          :class="tipoBotoes == 'listItem' ? 'border-bottom-none padding-none' : ''">
-          <p v-if="objItens.header && objItens.header.text" v-html="objItens.header.text"
-            class="interatividade-lista-titulo"></p>
-          <p v-if="objItens.body && objItens.body.text" v-html="objItens.body.text" class="interatividade-lista-corpo">
-          </p>
-          <p v-if="objItens.footer && objItens.footer.text" v-html="objItens.footer.text"
-            class="interatividade-lista-rodape"></p>
-        </div>
-        <p v-if="objItens.list && objItens.list.title" v-html="objItens.list.title" @click="expandirLista"
-          :class="tipoBotoes == 'listItem' ? 'bg-white border-radius-5 mt-5' : ''" class="interatividade-lista-link">
-        </p>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import InteratividadePopup from "./InteratividadePopup";
-
-export default {
-  components: { InteratividadePopup },
-  data() {
-    return {
-      listaEstaAberta: false,
-    };
-  },
-  props: {
-    interatividade: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    tipoBotoes() {
-      return this.interatividade.tipo;
-    },
-    arrBotoes() {
-      const { botoes } = this.interatividade;
-      return botoes ? botoes : [];
-    },
-    objItens() {
-      const { itens } = this.interatividade;
-      return itens ? itens : {};
-    },
-    listaExpandida() {
-      try {
-        const { list } = this.objItens;
-        const { sections } = list;
-        return sections ? sections : [];
-      } catch (e) {
-        console.error("Erro ao definir a lista a ser expandida");
-        console.error(e);
-        return [];
-      }
-    },
-  },
-  methods: {
-    expandirLista() {
-      this.listaEstaAberta = !this.listaEstaAberta;
-    },
-  },
-};
-</script>
-
-<style>
-.interatividade-btn {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #fff;
-  color: #111b21;
-  padding: 10px 12px;
-  border-radius: 5px;
-  margin-bottom: 10px;
-}
-
-.interatividade-link {
-  color: #0c5c8f !important;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 5px;
-}
-
-.interatividade-btn:nth-child(1) {
-  margin-top: 10px;
-}
-
-.interatividade-titulo {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.interatividade-lista {
-  width: 100%;
-  min-width: 200px;
-  border-radius: 15px;
-  background-color: #fff;
-  color: #333;
-  margin: 10px 0;
-}
-
-.interatividade-lista-conteudo {
-  padding: 10px;
-  border-bottom: 1px solid #d7d7d7;
-}
-
-.interatividade-lista-titulo {
-  font-weight: bold;
-  font-size: 19.2px;
-  margin-bottom: 10px;
-}
-
-.interatividade-lista-rodape {
-  color: #818181;
-  margin-top: 5px;
-}
-
-.interatividade-lista-link {
-  width: 100%;
-  text-align: center;
-  padding: 10px;
-  color: rgb(0, 110, 255);
-  cursor: pointer;
-  transition: color 200ms ease-in-out;
-}
-
-.interatividade-lista-link:hover {
-  color: rgb(0, 98, 143);
-}
-</style>
+<template>
+  <div class="interatividade">
+    <div v-if="
+      interatividade &&
+      interatividade.parameters &&
+      interatividade.parameters.button &&
+      interatividade.parameters.button.length
+    ">
+      <div v-for="(button, index) in interatividade.parameters.button" :key="index" class="interatividade-btn">
+        <p v-if="!button.url" v-html="button.text" class="interatividade-titulo"></p>
+        <a v-else :href="button.url" target="_blank" rel="noreferrer noopener" class="interatividade-link">
+          <p v-html="button.text" class="interatividade-titulo"></p>
+          <fa-icon :icon="['fas', 'external-link-square-alt']" />
+        </a>
+      </div>
+    </div>
+
+    <!-- Tudo aqui abaixo TEORICAMENTE e antigo e nao devera mais cair nas situacoes -->
+    <div v-if="
+      interatividade &&
+      interatividade.parameters &&
+      interatividade.parameters.button &&
+      (interatividade.parameters.button.type === 'dynamicURL' ||
+        interatividade.parameters.button.type === 'staticURL')
+    " class="interatividade-btn">
+      <a :href="interatividade.parameters.button.text" target="_blank" rel="noreferrer noopener"
+        class="interatividade-link">
+        Acessar <fa-icon :icon="['fas', 'external-link-square-alt']" />
+      </a>
+    </div>
+    <div v-if="
+      interatividade &&
+      interatividade.parameters &&
+      interatividade.parameters.button &&
+      interatividade.parameters.button.type === 'phoneNumber'
+    " class="interatividade-btn">
+      <p class="interatividade-titulo"
+        :title="`${interatividade.parameters.button.text} (${interatividade.parameters.button.phoneNumber})`" v-text="`${interatividade.parameters.button.text} (${interatividade.parameters.button.phoneNumber})`
+          "></p>
+    </div>
+    <div v-if="
+      interatividade &&
+      interatividade.parameters &&
+      interatividade.parameters.button &&
+      interatividade.parameters.button.type === 'quickReply'
+    " class="interatividade-btn">
+      <p class="interatividade-titulo" :title="`${interatividade.parameters.button.text}`"
+        v-text="`${interatividade.parameters.button.text}`"></p>
+    </div>
+    <transition name="show-x">
+      <InteratividadePopup v-if="listaEstaAberta" :lista="listaExpandida" :titulo="objItens.list.title"
+        @close="listaEstaAberta = false" />
+    </transition>
+    <template v-if="arrBotoes.length">
+      <div v-for="(btn, index) in arrBotoes" :key="index" :title="btn.titulo" class="interatividade-btn">
+        <p v-html="btn.titulo" class="interatividade-titulo"></p>
+      </div>
+    </template>
+    <template v-else-if="Object.keys(objItens).length">
+      <div class="interatividade-lista" :class="tipoBotoes == 'listItem' ? 'bg-none' : ''">
+        <div class="interatividade-lista-conteudo"
+          :class="tipoBotoes == 'listItem' ? 'border-bottom-none padding-none' : ''">
+          <p v-if="objItens.header && objItens.header.text" v-html="objItens.header.text"
+            class="interatividade-lista-titulo"></p>
+          <p v-if="objItens.body && objItens.body.text" v-html="objItens.body.text" class="interatividade-lista-corpo">
+          </p>
+          <p v-if="objItens.footer && objItens.footer.text" v-html="objItens.footer.text"
+            class="interatividade-lista-rodape"></p>
+        </div>
+        <p v-if="objItens.list && objItens.list.title" v-html="objItens.list.title" @click="expandirLista"
+          :class="tipoBotoes == 'listItem' ? 'bg-white border-radius-5 mt-5' : ''" class="interatividade-lista-link">
+        </p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import InteratividadePopup from "./InteratividadePopup";
+
+export default {
+  components: { InteratividadePopup },
+  data() {
+    return {
+      listaEstaAberta: false,
+    };
+  },
+  props: {
+    interatividade: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    tipoBotoes() {
+      return this.interatividade.tipo;
+    },
+    arrBotoes() {
+      const { botoes } = this.interatividade;
+      return botoes ? botoes : [];
+    },
+    objItens() {
+      const { itens } = this.interatividade;
+      return itens ? itens : {};
+    },
+    listaExpandida() {
+      try {
+        const { list } = this.objItens;
+        const { sections } = list;
+        return sections ? sections : [];
+      } catch (e) {
+        console.error("Erro ao definir a lista a ser expandida");
+        console.error(e);
+        return [];
+      }
+    },
+  },
+  methods: {
+    expandirLista() {
+      this.listaEstaAberta = !this.listaEstaAberta;
+    },
+  },
+};
+</script>
+
+<style>
+.interatividade-btn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  color: #111b21;
+  padding: 10px 12px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+.interatividade-link {
+  color: #0c5c8f !important;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 5px;
+}
+
+.interatividade-btn:nth-child(1) {
+  margin-top: 10px;
+}
+
+.interatividade-titulo {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.interatividade-lista {
+  width: 100%;
+  min-width: 200px;
+  border-radius: 15px;
+  background-color: #fff;
+  color: #333;
+  margin: 10px 0;
+}
+
+.interatividade-lista-conteudo {
+  padding: 10px;
+  border-bottom: 1px solid #d7d7d7;
+}
+
+.interatividade-lista-titulo {
+  font-weight: bold;
+  font-size: 19.2px;
+  margin-bottom: 10px;
+}
+
+.interatividade-lista-rodape {
+  color: #818181;
+  margin-top: 5px;
+}
+
+.interatividade-lista-link {
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  color: rgb(0, 110, 255);
+  cursor: pointer;
+  transition: color 200ms ease-in-out;
+}
+
+.interatividade-lista-link:hover {
+  color: rgb(0, 98, 143);
+}
+</style>

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

@@ -1,32 +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>
+<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>