vue-wiguet-chatweb 0.0.27 → 0.0.29

package/package.json

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

package/src/components/IconChat.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    version="1.1"
+    id="Capa_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="-10 -10 78 78"
+    xml:space="preserve"
+  >
+    <g>
+      <path
+        style="fill: orange"
+        d="M29,1.5c-16.016,0-29,11.641-29,26c0,5.292,1.768,10.211,4.796,14.318
+		C4.398,46.563,3.254,53.246,0,56.5c0,0,9.943-1.395,16.677-5.462c0.007,0.003,0.015,0.006,0.022,0.009
+		c2.764-1.801,5.532-3.656,6.105-4.126c0.3-0.421,0.879-0.548,1.33-0.277c0.296,0.178,0.483,0.503,0.489,0.848
+		c0.01,0.622-0.005,0.784-5.585,4.421C22.146,52.933,25.498,53.5,29,53.5c16.016,0,29-11.641,29-26S45.016,1.5,29,1.5z"
+      />
+      <circle style="fill: #ffffff" cx="15" cy="27.5" r="3" />
+      <circle style="fill: #ffffff" cx="29" cy="27.5" r="3" />
+      <circle style="fill: #ffffff" cx="43" cy="27.5" r="3" />
+    </g>
+  </svg>
+</template>

package/src/components/IconTelegram.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    viewBox="0 0 256 256"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    preserveAspectRatio="xMidYMid"
+  >
+    <g>
+      <path
+        d="M128,0 C57.307,0 0,57.307 0,128 L0,128 C0,198.693 57.307,256 128,256 L128,256 C198.693,256 256,198.693 256,128 L256,128 C256,57.307 198.693,0 128,0 L128,0 Z"
+        fill="#40B3E0"
+      ></path>
+      <path
+        d="M190.2826,73.6308 L167.4206,188.8978 C167.4206,188.8978 164.2236,196.8918 155.4306,193.0548 L102.6726,152.6068 L83.4886,143.3348 L51.1946,132.4628 C51.1946,132.4628 46.2386,130.7048 45.7586,126.8678 C45.2796,123.0308 51.3546,120.9528 51.3546,120.9528 L179.7306,70.5928 C179.7306,70.5928 190.2826,65.9568 190.2826,73.6308"
+        fill="#FFFFFF"
+      ></path>
+      <path
+        d="M98.6178,187.6035 C98.6178,187.6035 97.0778,187.4595 95.1588,181.3835 C93.2408,175.3085 83.4888,143.3345 83.4888,143.3345 L161.0258,94.0945 C161.0258,94.0945 165.5028,91.3765 165.3428,94.0945 C165.3428,94.0945 166.1418,94.5735 163.7438,96.8115 C161.3458,99.0505 102.8328,151.6475 102.8328,151.6475"
+        fill="#D2E5F1"
+      ></path>
+      <path
+        d="M122.9015,168.1154 L102.0335,187.1414 C102.0335,187.1414 100.4025,188.3794 98.6175,187.6034 L102.6135,152.2624"
+        fill="#B5CFE4"
+      ></path>
+    </g>
+  </svg>
+</template>

package/src/components/IconWhatsApp.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    version="1.1"
+    id="Capa_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 455.731 455.731"
+    xml:space="preserve"
+  >
+    <g>
+      <rect
+        x="0"
+        y="0"
+        style="fill: #1bd741"
+        width="455.731"
+        height="455.731"
+      />
+      <g>
+        <path
+          style="fill: #ffffff"
+          d="M68.494,387.41l22.323-79.284c-14.355-24.387-21.913-52.134-21.913-80.638
+			c0-87.765,71.402-159.167,159.167-159.167s159.166,71.402,159.166,159.167c0,87.765-71.401,159.167-159.166,159.167
+			c-27.347,0-54.125-7-77.814-20.292L68.494,387.41z M154.437,337.406l4.872,2.975c20.654,12.609,44.432,19.274,68.762,19.274
+			c72.877,0,132.166-59.29,132.166-132.167S300.948,95.321,228.071,95.321S95.904,154.611,95.904,227.488
+			c0,25.393,7.217,50.052,20.869,71.311l3.281,5.109l-12.855,45.658L154.437,337.406z"
+        />
+        <path
+          style="fill: #ffffff"
+          d="M183.359,153.407l-10.328-0.563c-3.244-0.177-6.426,0.907-8.878,3.037
+			c-5.007,4.348-13.013,12.754-15.472,23.708c-3.667,16.333,2,36.333,16.667,56.333c14.667,20,42,52,90.333,65.667
+			c15.575,4.404,27.827,1.435,37.28-4.612c7.487-4.789,12.648-12.476,14.508-21.166l1.649-7.702c0.524-2.448-0.719-4.932-2.993-5.98
+			l-34.905-16.089c-2.266-1.044-4.953-0.384-6.477,1.591l-13.703,17.764c-1.035,1.342-2.807,1.874-4.407,1.312
+			c-9.384-3.298-40.818-16.463-58.066-49.687c-0.748-1.441-0.562-3.19,0.499-4.419l13.096-15.15
+			c1.338-1.547,1.676-3.722,0.872-5.602l-15.046-35.201C187.187,154.774,185.392,153.518,183.359,153.407z"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/Widget.vue

@@ -5,16 +5,37 @@
   >
     <div
       id="chat-circle"
-      role="button"
-      @click="toggleChat"
       class="widget-container"
       v-show="!isChatBoxVisible"
-    >
-      <div class="new-message-badge" v-if="newMessages">
+    >   
+      <div class="container-buttons-chat" :class="{'active': toggleButtonsChats}">
+        <a href="javascript:;"  class="button whatsapp" @click="go(MeansCommunication.WHATSAPP)">
+          <IconWhatsApp />
+        </a>
+
+        <a href="javascript:;"  class="button telegram" @click="go(MeansCommunication.TELEGRAM)">
+          <IconTelegram />
+        </a>
+
+        <a 
+          href="javascript:;"
+          class="button webchat"
+          title="Debe estar autenticado"
+          :class="{'disabled': !props.tokenAuth }"
+          @click="toggleButtonsChats && toggleChat()"
+        >
+          <IconChat />
+        </a>
+      </div>
+    
+      <div class="new-message-badge" v-if="newMessages" >
         {{ newMessages > 9 ? "9+" : newMessages }}
       </div>
-      <IconWidget />
+      <a href="javascript:;" @click="toggleButtonsChats = !toggleButtonsChats">
+        <IconWidget />
+      </a>
     </div>
+
     <div class="chat-box" v-show="isChatBoxVisible">
       <Chat
         :visible="isChatBoxVisible"
@@ -36,16 +57,47 @@
 import { PropType, ref } from "vue";
 import Chat from "./Chat.vue";
 import IconWidget from "./IconWidget.vue";
+import { VirtualHost } from '../dto/app.dto';
+import IconTelegram from "./IconTelegram.vue";
+import IconWhatsApp from "./IconWhatsApp.vue";
+import IconChat from "./IconChat.vue";
 
 const emit = defineEmits(["show-toast", "show-confirm"]);
 
+const enum MeansCommunication{
+  WHATSAPP,
+  TELEGRAM
+}
+
+function go(means: MeansCommunication) {
+  const cellphoneNumbers = window.VITE_CELLPHONE_NUMBERS.split(',');
+  
+  if (cellphoneNumbers.length === 0) {
+    console.warn('not found cellphone numbers')
+    return
+  }
+
+  toggleButtonsChats.value = false;
+
+  const index = Math.floor(Math.random() * cellphoneNumbers.length)
+  
+  if(MeansCommunication['WHATSAPP'] === means) {
+    window.open('https://wa.me/'+ cellphoneNumbers[index], 'WhatsApp', 'noopener')
+    return;
+  }
+
+  window.open('https://t.me/+' + cellphoneNumbers[index], 'Telegram', 'noopener')
+}
+
 const isChatBoxVisible = ref(false);
 const newMessages = ref(0);
+const toggleButtonsChats = ref(false);
+
 const toggleChat = () => {
   isChatBoxVisible.value = !isChatBoxVisible.value;
 };
 
-defineProps({
+const props = defineProps({
   tokenAuth: { type: String, required: true },
   titlePrincipal: { type: String },
   user: {
@@ -67,6 +119,51 @@ defineProps({
 </style>
 
 <style scoped>
+
+.disabled {
+  color: currentColor;
+  cursor: not-allowed;
+  opacity: 0.3;
+  text-decoration: none;
+}
+
+.container-buttons-chat { 
+  position: relative;
+}
+.button {
+  position: absolute;
+  width: 2.5rem;
+  height: 2.5rem;
+  right: 1.35rem;
+
+  opacity: 0;
+  box-shadow: 0px 1px 3px 1px #c0c0c0;
+  border-radius: 100%;
+  border: 1px solid white;
+  background-color: white;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.5s ease, opacity 0.3s ease;
+  z-index: -1;
+}
+
+.container-buttons-chat.active > a {
+  z-index: 1;
+  opacity: 1;
+}
+
+.container-buttons-chat.active .whatsapp {
+  transform: translateY(-150px); /* Subir más arriba */
+}
+
+.container-buttons-chat.active .telegram {
+  transform: translateY(-100px); /* Subir más arriba */
+}
+
+.container-buttons-chat.active .webchat {
+  transform: translateY(-50px); /* Subir más arriba */
+}
+
 .widget-container {
   position: relative;
 }