vue-wiguet-chatweb 0.0.9 → 0.0.10

package/src/components/Chat.vue

@@ -1,153 +1,269 @@
 <template>
-    <div class="widget">
-        <div class="header-widget">
-            <h4 class="title-chat">{{ titlePrincipal }}</h4>
-            <IconClose class="pointer" @click="toggleChat()"/>
-        </div>
-        <div class="messages-container" id="messages-container" ref="messagesContainer">
-          <chat-message class="message" v-for="(message, index) in messages" :key="index" :message="message">
-          </chat-message>
-        </div>
-        <div class="input-message w-full">
-          <form class="message-send" @submit.prevent="submitMessage">
-            <div class="form-message">
-              <button type="submit">
-                    <IconUser/>
-              </button>
-              <div class="jl-inputgroup-chat">
-                  <input v-model="message" class="jl2-input-chat" required/>
-                  <button type="submit" class="pointer">
-                    <IconSend/>
-                  </button>
-              </div>
-            </div>
-          </form>
+  <div class="widget">
+    <div class="header-widget">
+      <h4 class="title-chat">{{ titlePrincipal }}</h4>
+      <button @click="() => toggleChat()" class="btn-close">
+        <IconClose class="pointer" />
+      </button>
+    </div>
+    <div class="messages-container" ref="messageContainerRef">
+      <div class="loader" v-if="isLoading">
+        <Loader />
+      </div>
+      <MessageList
+        :messages="messagesData.data"
+        :canLoadMoreMessages="messagesData.canLoadMoreMessages"
+        @loadMore="getMessages"
+        @retry="retryMessage"
+      />
+    </div>
+
+    <div class="input-message w-full">
+      <form class="message-send" @submit.prevent="submitMessage">
+        <div class="form-message">
+          <!-- <button type="submit">
+            <IconUser />
+          </button> -->
+          <div class="jl-inputgroup-chat">
+            <input v-model="message" class="jl2-input-chat" required />
+            <button type="submit" class="pointer btn-primary">
+              <IconSend style="width: 20px; height: 20px" />
+            </button>
+          </div>
         </div>
+      </form>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import ChatMessage from './ChatMessage.vue';
-//import { useStore } from 'vuex';
-import { RabbitMQService } from 'vue-rabbit-frontend'
-import IconClose from './IconClose.vue'
-import IconSend from './IconSend.vue'
-import IconUser from './IconUser.vue'
-import {syncVirtualHostCentral,sendMessageByAppAndPhone,messagesByAppAndPhone} from '../store'
-///STORE
-//const store = useStore()
+import { ref, onMounted, nextTick, PropType, watch } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import { RabbitMQService } from "vue-rabbit-frontend";
+import {
+  type SendMessageBody,
+  ListMessageBody,
+  Message,
+  RABBIT_EVENTS,
+} from "../dto/app.dto";
+import IconClose from "./IconClose.vue";
+import IconSend from "./IconSend.vue";
+// import IconUser from "./IconUser.vue";
+import { getMessagesApi, sendMessageApi } from "../store/index";
+import { getInformationApi } from "../store";
+import MessageList from "./MessageList.vue";
+import Loader from "./Loader.vue";
+import { searchFromLast } from "../resources/functions.helpers";
+
 //DATA
-const app = ref('webchat')
-// const deviceSelect = ref('76177719')
-const rabbitMQServiceListen:any = ref(null);
-const message:any = ref(null);
-const messages:any = ref([]);
-const virtualHost:any = ref({virtualhost:''});
+const rabbitMQServiceListen: any = ref(null);
+const message = ref("");
+
+const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
+  data: [],
+  canLoadMoreMessages: false,
+});
+const virtualHost: any = ref({ virtualhost: "" });
+const appChatId = ref("");
+const isLoading = ref(false);
+
+const emit = defineEmits([
+  "show-toast",
+  "show-confirm",
+  "new-message",
+  "clear-new-messages",
+]);
 
 const props = defineProps({
-  titlePrincipal:{ type: String,default:'Comunicación en linea para consultas' },
-  toggleChat:{ type: Function, required: true },
-  tokenAuth:{ type: String, required: true },
-  phoneUser:{ type: String, required: true }
+  titlePrincipal: {
+    type: String,
+    default: "Comunicación en linea para consultas",
+  },
+  toggleChat: { type: Function, required: true },
+  tokenAuth: { type: String, required: true },
+  user: {
+    type: Object as PropType<{
+      nombreCompleto: string;
+      ci: string;
+      msPersonaId: number;
+    }>,
+    required: true,
+  },
+  visible: { type: Boolean, required: true },
 });
 
-const removeNumPrefix = (num:string) => {
-    if (num.startsWith("591") && num.length === 11) {
-      return num.substring(3);
-    }
-    return num;
-}
+const messageContainerRef = ref<HTMLElement | null>(null);
 
-const messagesContainer = ref<HTMLElement | null>(null);
+watch(
+  () => props.visible,
+  async (current) => {
+    if (current) {
+      emit("clear-new-messages");
+      if (!virtualHost.value || !appChatId.value) {
+        const resp = await getInformationApi(props.tokenAuth);
+        const data = resp.response.data;
+        virtualHost.value = data.virtualHost;
+        appChatId.value = data.appChat.id;
+        connectMsRabbit();
+      }
+      if (messagesData.value.data.length === 0) {
+        getMessages();
+      }
+    }
+  }
+);
+onMounted(async () => {
+  if (!virtualHost.value || !appChatId.value) {
+    const resp = await getInformationApi(props.tokenAuth);
+    const data = resp.response.data;
+    virtualHost.value = data.virtualHost;
+    appChatId.value = data.appChat.id;
+    connectMsRabbit();
+  }
+});
 
-const scrollToBottom = () => {
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+const submitMessage = async (event: any) => {
+  event.preventDefault();
+  if (message.value?.length > 300) {
+    emit("show-toast", {
+      severity: "warn",
+      summary: "Error",
+      detail: "El mensaje no puede superar los 300 caracteres",
+      life: 5000,
+    });
+    return;
+  }
+  if (!message.value.trim()) {
+    emit("show-toast", {
+      severity: "warn",
+      summary: "Error",
+      detail: "Por favor ingrese un mensaje",
+      life: 5000,
+    });
+    return;
+  }
+  const newMessage = {
+    id: uuidv4(),
+    message: message.value,
+    visto: true,
+    multimedia: false,
+    esCliente: true,
+    appChatId: appChatId.value,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    sender: {
+      nombreCompleto: props.user.nombreCompleto,
+      ci: props.user.ci,
+      msPersonaId: props.user.msPersonaId,
+    },
+  };
+  const idx = messagesData.value.data.push(newMessage) - 1;
+  try {
+    const newMsg = await sendApi(message.value, appChatId.value);
+    messagesData.value.data[idx] = newMsg.response.data;
+  } catch (error) {
+    messagesData.value.data[idx].error = {
+      error: true,
+      id: newMessage.id,
+    };
+    emit("show-toast", {
+      severity: "error",
+      summary: "Error",
+      detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+      life: 5000,
+    });
+  } finally {
+    message.value = "";
+    scrollToBottom();
   }
 };
 
-const submitMessage = async (event:any) => {
-  event.preventDefault();
-  //const {virtualHost} = store.state
-  const {virtualhost} = virtualHost.value
-  // await store.dispatch('sendMessageByAppAndPhone',{
-  //   token:props.tokenAuth,
-  //   data:{
-  //     virtualHost:virtualHost.value,
-  //     queue:`widget_chat_${sessionStorage.getItem('tabBrowser')}`,//`${selectDetailtChat.value.app}_${queueUniqueUser.value}`,
-  //     device:'00000000',
-  //     phone:removeNumPrefix(deviceSelect.value),
-  //     app:app.value,
-  //     message: message.value,
-  //     widget:true
-  //   }
-  // })
-  await sendMessageByAppAndPhone({
-    token:props.tokenAuth,
-    data:{
-      virtualHost:virtualhost,
-      queue:`widget_chat_${sessionStorage.getItem('tabBrowser')}`,//`${selectDetailtChat.value.app}_${queueUniqueUser.value}`,
-      device:'00000000',
-      phone:removeNumPrefix(props.phoneUser),
-      app:app.value,
-      message: message.value,
-      widget:true
-    }
-  })
-  message.value = null
-  scrollToBottom()
-}
+const sendApi = async (message: string, appChatId: string) => {
+  const body: SendMessageBody = {
+    esCliente: true,
+    message,
+    appChatId,
+  };
+  return sendMessageApi(body, props.tokenAuth);
+};
 
+const getMessages = async () => {
+  try {
+    isLoading.value = true;
+    const lastMessagesId = messagesData.value.data[0]?.id;
+    const body: ListMessageBody = {
+      limit: 10,
+      lastMessagesId,
+      appChatId: appChatId.value,
+    };
 
-const getMessagesByApp = async (param:{resetConnection:boolean}) => {
-  if(param.resetConnection)
-      disconnectMsRabbit();
-  connectMsRabbit();
-  // const messagesParse = [];
-  // await store.dispatch('messagesByAppAndPhone', {
-  //   token:props.tokenAuth,
-  //   data:{
-  //     phone:props.phoneUser,
-  //     app:app.value,
-  //     device:null
-  //   }
-  // });
-  const getMessages = await messagesByAppAndPhone({
-    token:props.tokenAuth,
-    data:{
-      phone:props.phoneUser,
-      app:app.value,
-      device:null
+    const resp = await getMessagesApi({ body, token: props.tokenAuth });
+    messagesData.value.data.unshift(
+      ...resp.data.sort((a, b) => -b.createdAt.localeCompare(a.createdAt))
+    );
+    messagesData.value.canLoadMoreMessages =
+      resp.pagination.total > resp.pagination.limit;
+    if (lastMessagesId && messageContainerRef.value?.scrollHeight) {
+      mantainElementsOnViewport(messageContainerRef.value?.scrollHeight);
     }
-  });
-  //const messagesData = store.getters.get_messages_chat;
-  const messagesData = getMessages
-  if (messagesData) {
-    
-    messages.value = messagesData;
-  
-    // for (const msg of messagesData) {
-    //   messagesParse.push(...msg.messages);
-    // }
-    // messages.value = messagesParse;
+    if (!lastMessagesId) scrollToBottom();
+  } catch (error) {
+    isLoading.value = false;
+    throw error;
+  } finally {
+    isLoading.value = false;
   }
 };
 
-const connectMsRabbit = (app:any = 'webchat') => {
-  //const {virtualHost} = store.state
-  const {virtualhost} = virtualHost.value
-  let data = sessionStorage.getItem('tabBrowser');
-  if(!data){
-      let tab = Date.now();
-      sessionStorage.setItem('tabBrowser', `${tab}`)
+const retryMessage = async (message: Message) => {
+  emit("show-confirm", async () => {
+    try {
+      if (!message.error?.id) return;
+      const msg = await sendApi(message.message, appChatId.value);
+      const idx = searchFromLast<Message>(
+        messagesData.value.data,
+        "id",
+        message.error.id
+      );
+      messagesData.value.data[idx] = { ...msg.response.data, error: undefined };
+    } catch (error) {
+      emit("show-toast", {
+        severity: "error",
+        summary: "Error",
+        detail: "Ocurrio un error al enviar el mensaje, intente nuevamente",
+        life: 5000,
+      });
+    } finally {
+      scrollToBottom();
+    }
+  });
+};
+
+const connectMsRabbit = (app: any = "webchat") => {
+  const { virtualhost } = virtualHost.value;
+  let data = sessionStorage.getItem("tabBrowser");
+  if (!data) {
+    let tab = Date.now();
+    sessionStorage.setItem("tabBrowser", `${tab}`);
   }
-  rabbitMQServiceListen.value = new RabbitMQService(`${virtualhost}`,`widget_chat_${sessionStorage.getItem('tabBrowser')}`);
+  rabbitMQServiceListen.value = new RabbitMQService(
+    `${virtualhost}`,
+    `widget_chat_${sessionStorage.getItem("tabBrowser")}`
+  );
   rabbitMQServiceListen.value.connect();
-  rabbitMQServiceListen.value.subscribe(async () => {
-    await getMessagesByApp({resetConnection:false});
-    const objDiv = document.getElementById("messages-container") as HTMLElement;
-    objDiv.scrollTop = objDiv.scrollHeight;
+
+  rabbitMQServiceListen.value.subscribe(async (val: any) => {
+    if (
+      val.event &&
+      val.event === RABBIT_EVENTS.NEW_MESSAGE &&
+      !val.message.esCliente
+    ) {
+      messagesData.value.data.push(val.message);
+      if (props.visible === false) {
+        emit("new-message");
+      }
+    }
   });
 };
 
@@ -155,26 +271,54 @@ const disconnectMsRabbit = () => {
   rabbitMQServiceListen.value?.disconnectClient();
 };
 
-onMounted(async () => {
-  await getMessagesByApp({resetConnection:false})
-  const virtualHostUniqueUser = `widget_chat_${props.phoneUser}`
-  // await store.dispatch('syncVirtualHostCentral',{
-  //   token:props.tokenAuth,
-  //   data:{
-  //     virtualHost:virtualHostUniqueUser
-  //   }
-  // })
-  virtualHost.value = await syncVirtualHostCentral({
-    token:props.tokenAuth,
-    data:{
-      virtualHost:virtualHostUniqueUser
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (messageContainerRef.value) {
+      messageContainerRef.value.scrollTop =
+        messageContainerRef.value.scrollHeight;
     }
-  })
-  connectMsRabbit()
-  scrollToBottom()
-});
+  });
+};
+
+const mantainElementsOnViewport = (scrollHeightBeforeAdd: number) => {
+  nextTick(() => {
+    const objDiv = messageContainerRef.value;
+    if (objDiv) {
+      objDiv.scrollTop = objDiv.scrollHeight - scrollHeightBeforeAdd;
+    }
+  });
+};
 </script>
 
 <style scoped>
-  @import url(../style.css);
+@import url(../style.css);
+.btn-primary {
+  padding: 10px 12px;
+  &:hover {
+    background-color: rgb(242, 139, 12, 0.1);
+  }
+}
+
+.btn-close {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  &:hover {
+    background-color: rgba(202, 202, 202, 0.534);
+  }
+}
+
+.messages-container {
+  position: relative;
+}
+.loader {
+  position: absolute;
+  top: 18px;
+  z-index: 5;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

package/src/components/DangerIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="rgb(248 113 113)"
+      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/src/components/IconClose.vue

@@ -1,6 +1,6 @@
-<template>
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31Z" stroke="#B3B3B3" stroke-miterlimit="10"/>
-        <path d="M19.78 22.3L15.98 16.63H15.9601L12.2001 22.3H11.0701L15.37 15.8899L11.25 9.69995H12.38L15.98 15.08H16L19.67 9.69995H20.8L16.55 15.82L20.92 22.3H19.77H19.78Z" fill="#B3B3B3"/>
-    </svg>
+<template>
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31Z" stroke="#B3B3B3" stroke-miterlimit="10"/>
+        <path d="M19.78 22.3L15.98 16.63H15.9601L12.2001 22.3H11.0701L15.37 15.8899L11.25 9.69995H12.38L15.98 15.08H16L19.67 9.69995H20.8L16.55 15.82L20.92 22.3H19.77H19.78Z" fill="#B3B3B3"/>
+    </svg>
 </template>

package/src/components/IconSend.vue

@@ -1,6 +1,8 @@
-<template>
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.9301 23.25C5.65005 23.25 0.550049 18.14 0.550049 11.87C0.550049 5.6 5.66005 0.48999 11.9301 0.48999C18.2001 0.48999 23.3101 5.6 23.3101 11.87C23.3101 18.14 18.2001 23.25 11.9301 23.25ZM11.9301 1.10999C6.00005 1.10999 1.17004 5.94 1.17004 11.87C1.17004 17.8 6.00005 22.63 11.9301 22.63C17.8601 22.63 22.6899 17.8 22.6899 11.87C22.6899 5.94 17.8601 1.10999 11.9301 1.10999Z" fill="#F28B0C"/>
-    <path d="M8.68994 17.0601C8.63994 17.0601 8.58004 17.0501 8.54004 17.0201C8.44004 16.9701 8.38 16.8601 8.38 16.7501V6.99007C8.38 6.88007 8.44004 6.78005 8.54004 6.72005C8.64004 6.66005 8.74998 6.67005 8.84998 6.72005L17.1899 11.6001C17.2799 11.6601 17.34 11.7601 17.34 11.8701C17.34 11.9801 17.2799 12.0801 17.1899 12.1401L8.84998 17.0201C8.84998 17.0201 8.74994 17.0601 8.68994 17.0601ZM9 7.5301V16.21L16.42 11.8701L9 7.5301Z" fill="#F28B0C"/>
-    </svg>
-</template>
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      fill="#F28B0C"
+      d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"
+    />
+  </svg>
+</template>

package/src/components/IconUser.vue

@@ -1,6 +1,6 @@
-<template>
-    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M21.04 40.9399C32.0857 40.9399 41.04 31.9856 41.04 20.9399C41.04 9.89419 32.0857 0.939941 21.04 0.939941C9.99428 0.939941 1.03998 9.89419 1.03998 20.9399C1.03998 31.9856 9.99428 40.9399 21.04 40.9399Z" stroke="#F28B0C" stroke-width="1.5" stroke-miterlimit="10"/>
-        <path d="M22.87 20.36C24.92 19.57 26.38 17.5801 26.38 15.2601C26.38 12.2401 23.93 9.79004 20.91 9.79004C17.89 9.79004 15.44 12.2401 15.44 15.2601C15.44 17.6301 16.95 19.6401 19.06 20.4001C16.15 21.2601 14.02 23.9501 14.02 27.1301V31.7701C14.02 31.9401 14.16 32.08 14.33 32.08H27.76C27.93 32.08 28.07 31.9401 28.07 31.7701V27.1301C28.07 23.8901 25.86 21.16 22.87 20.36Z" fill="#F28B0C"/>
-    </svg>
+<template>
+    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21.04 40.9399C32.0857 40.9399 41.04 31.9856 41.04 20.9399C41.04 9.89419 32.0857 0.939941 21.04 0.939941C9.99428 0.939941 1.03998 9.89419 1.03998 20.9399C1.03998 31.9856 9.99428 40.9399 21.04 40.9399Z" stroke="#F28B0C" stroke-width="1.5" stroke-miterlimit="10"/>
+        <path d="M22.87 20.36C24.92 19.57 26.38 17.5801 26.38 15.2601C26.38 12.2401 23.93 9.79004 20.91 9.79004C17.89 9.79004 15.44 12.2401 15.44 15.2601C15.44 17.6301 16.95 19.6401 19.06 20.4001C16.15 21.2601 14.02 23.9501 14.02 27.1301V31.7701C14.02 31.9401 14.16 32.08 14.33 32.08H27.76C27.93 32.08 28.07 31.9401 28.07 31.7701V27.1301C28.07 23.8901 25.86 21.16 22.87 20.36Z" fill="#F28B0C"/>
+    </svg>
 </template>

package/src/components/IconWidget.vue

@@ -1,46 +1,46 @@
-<template>
-    <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g filter="url(#filter0_d_4007_3488)">
-        <path d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
-        <path d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z" fill="#F28B0C"/>
-        <path d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z" fill="#F28B0C"/>
-        <path d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z" fill="#F28B0C"/>
-        <path d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z" fill="#F28B0C"/>
-        </g>
-        <defs>
-        <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-        <feOffset dy="4"/>
-        <feGaussianBlur stdDeviation="2"/>
-        <feComposite in2="hardAlpha" operator="out"/>
-        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
-        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
-        </filter>
-        </defs>
-    </svg>
-    
-<!-- <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_d_4007_3488)">
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z"/>
-    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z"/>
-    </g>
-    <defs>
-    <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-    <feOffset dy="4"/>
-    <feGaussianBlur stdDeviation="2"/>
-    <feComposite in2="hardAlpha" operator="out"/>
-    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
-    </filter>
-    </defs>
-</svg> -->
-    
+<template>
+    <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_d_4007_3488)">
+        <path d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
+        <path d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z" fill="#F28B0C"/>
+        <path d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z" fill="#F28B0C"/>
+        <path d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z" fill="#F28B0C"/>
+        <path d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z" fill="#F28B0C"/>
+        </g>
+        <defs>
+        <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <feOffset dy="4"/>
+        <feGaussianBlur stdDeviation="2"/>
+        <feComposite in2="hardAlpha" operator="out"/>
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
+        </filter>
+        </defs>
+    </svg>
+    
+<!-- <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_4007_3488)">
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M43.5 77C64.2107 77 81 60.2107 81 39.5C81 18.7893 64.2107 2 43.5 2C22.7893 2 6 18.7893 6 39.5C6 60.2107 22.7893 77 43.5 77Z" fill="white" stroke="#F28B0C" stroke-width="3" stroke-miterlimit="10"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M39.705 38.885C40.6908 38.885 41.49 38.0858 41.49 37.1C41.49 36.1142 40.6908 35.315 39.705 35.315C38.7192 35.315 37.92 36.1142 37.92 37.1C37.92 38.0858 38.7192 38.885 39.705 38.885Z"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M45.075 38.885C46.0608 38.885 46.86 38.0858 46.86 37.1C46.86 36.1142 46.0608 35.315 45.075 35.315C44.0892 35.315 43.29 36.1142 43.29 37.1C43.29 38.0858 44.0892 38.885 45.075 38.885Z"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M50.445 38.885C51.4308 38.885 52.23 38.0858 52.23 37.1C52.23 36.1142 51.4308 35.315 50.445 35.315C49.4592 35.315 48.66 36.1142 48.66 37.1C48.66 38.0858 49.4592 38.885 50.445 38.885Z"/>
+    <path clip-rule="evenodd"  fill="currentColor" fill-rule="evenodd" d="M63.27 58.235L58.755 47.78C61.125 44.765 62.415 40.97 62.415 37.175C62.415 26.435 52.665 18.185 41.925 20.12C39.99 19.325 37.98 18.905 35.835 18.905C26.955 18.905 19.785 26.135 19.785 34.955C19.785 38.54 21 41.975 23.145 44.765L18.99 54.44C18.84 54.8 18.915 55.235 19.2 55.445C19.485 55.73 19.92 55.73 20.205 55.595L30.6 50.15C31.89 50.585 33.255 50.87 34.68 50.945C39.48 54.53 45.57 55.25 50.655 53.45L61.905 59.33C62.265 59.48 62.625 59.48 62.91 59.18C63.345 58.97 63.405 58.61 63.27 58.25V58.235ZM51.24 51.71C51.03 51.56 50.745 51.56 50.52 51.635C48.795 52.28 46.935 52.64 45.15 52.64C36.69 52.64 29.61 45.755 29.61 37.1C29.61 29.72 34.845 23.345 42.075 21.845C51.75 19.91 60.705 27.29 60.705 37.1C60.705 40.685 59.415 44.27 57.12 46.985C56.91 47.27 56.835 47.63 56.97 47.915L60.69 56.585L51.24 51.71Z"/>
+    </g>
+    <defs>
+    <filter id="filter0_d_4007_3488" x="0.5" y="0.5" width="86" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="4"/>
+    <feGaussianBlur stdDeviation="2"/>
+    <feComposite in2="hardAlpha" operator="out"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4007_3488"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4007_3488" result="shape"/>
+    </filter>
+    </defs>
+</svg> -->
+    
 </template>