typebot sessions

src/components/instance/profile/BasicInfo.vue

@@ -30,7 +30,7 @@
         <v-text-field
           class="flex-grow-1 flex-shrink-0"
           v-model="data.name"
-          :disabled="true || loading"
+          :disabled=" loading"
           label="Nome"
           counter
           maxlength="25"
@@ -38,8 +38,6 @@
             (v) => !!v || 'Nome é obrigatório',
             (v) => v.length <= 25 || 'Nome deve ter no máximo 25 caracteres',
           ]"
-          hint="Indisponível no momento"
-          persistent-hint
         ></v-text-field>
         <v-text-field
           class="flex-grow-1 flex-shrink-0"
@@ -143,7 +141,7 @@ export default {
         const instance = this.instance.instance;
         const { isOpen } = this;
         var data = {
-          name: isOpen ? instance.profileName || "" : "",
+          name: isOpen ? instance.profileName.replace("not loaded", "") || "" : "",
           status: isOpen ? instance.profileStatus || "" : "",
         };
 

src/components/instance/profile/Privacy.vue

@@ -74,7 +74,7 @@
           density="comfortable"
           prepend-inner-icon="mdi-account-multiple-plus"
         ></v-select>
-        <v-select
+        <!-- <v-select
           v-model="privacyData.calladd"
           :items="WAPrivacyValue"
           label="Ser adicionado em chamadas"
@@ -82,7 +82,7 @@
           :rules="[(v) => !!v || 'Ser adicionado em chamadas é obrigatório']"
           density="comfortable"
           prepend-inner-icon="mdi-phone-plus"
-        ></v-select>
+        ></v-select> -->
       </v-form>
     </v-card-text>
     <v-card-actions v-if="expanded" class="d-flex flex-wrap gap-x-1">

src/components/instance/settings/Typebot.vue

@@ -174,7 +174,20 @@
         :disabled="loading"
         hide-details
       ></v-switch>
+
+      <v-btn
+        :disabled="loading"
+        variant="text"
+        @click="openTypebotSessions"
+        size="small"
+      >
+        ver {{ typebotData.sessions.length }} sess{{
+          typebotData.sessions.length != 1 ? "ões" : "ão"
+        }}
+      </v-btn>
+
       <v-spacer></v-spacer>
+
       <v-btn
         :disabled="
           !valid ||
@@ -189,9 +202,17 @@
       </v-btn>
     </v-card-actions>
   </v-card>
+  <TypebotSessions
+    :instance="instance"
+    :loading="loading"
+    :data="typebotData"
+    @refresh="loadTypebot"
+    ref="typebotSessions"
+  />
 </template>
 
 <script>
+import TypebotSessions from "@/components/modal/TypebotSessions.vue";
 import instanceController from "@/services/instanceController";
 const defaultObj = () => ({
   enabled: false,
@@ -241,8 +262,10 @@ export default {
       unknown_message: "",
     },
   }),
-
   methods: {
+    openTypebotSessions() {
+      this.$refs.typebotSessions.open();
+    },
     toggleExpanded() {
       if (this.loading) return;
       this.expanded = !this.expanded;
@@ -268,7 +291,6 @@ export default {
         this.loading = false;
       }
     },
-
     async loadTypebot() {
       try {
         this.loading = true;
@@ -276,7 +298,6 @@ export default {
         const typebotData = await instanceController.typebot.get(
           this.instance.instance.instanceName
         );
-
         this.typebotData = Object.assign(defaultObj(), typebotData);
         this.defaultTypebotData = Object.assign(defaultObj(), typebotData);
       } catch (e) {
@@ -286,12 +307,12 @@ export default {
       }
     },
   },
-
   watch: {
     expanded(expanded) {
       if (expanded) this.loadTypebot();
     },
   },
+  components: { TypebotSessions },
 };
 </script>
 

src/components/modal/TypebotSessions.vue

@@ -0,0 +1,196 @@
+<!-- eslint-disable vue/valid-v-slot -->
+<template>
+  <v-dialog v-model="dialog" max-width="850px" scrollable>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        Sessões do Typebot
+        <v-spacer />
+        <h3>{{ sessions.length }}</h3>
+        <v-btn
+          @click="$emit('refresh')"
+          icon
+          :loading="loading"
+          size="small"
+          variant="text"
+        >
+          <v-icon>mdi-refresh</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="sessions"
+          :no-data-text="
+            loading ? 'Carregando...' : 'Nenhuma sessão encontrada'
+          "
+          :rows-per-page-items="[10, 25, 50, 100]"
+        >
+          <template v-slot:item.remoteJid="{ item }">
+            <a :href="`https://wa.me/${item.remoteJid.split('@')[0]}`">
+              {{ item.remoteJid.split("@")[0] }}
+            </a>
+          </template>
+          <template v-slot:item.status="{ item }">
+            <v-chip :color="item.status.color" label size="small">
+              <v-icon start>{{ item.status.icon }}</v-icon>
+              {{ item.status.text }}
+            </v-chip>
+          </template>
+          <template v-slot:item.variables="{ item }">
+            <v-tooltip top>
+              <template v-slot:activator="{ props }">
+                <v-chip color="primary" label size="small" v-bind="props">
+                  {{ Object.entries(item.prefilledVariables).length }}
+                </v-chip>
+              </template>
+              <div>
+                <p
+                  v-for="[key, value] of Object.entries(
+                    item.prefilledVariables
+                  )"
+                  :key="key"
+                >
+                  <b>{{ key }}:</b> {{ value }}
+                </p>
+              </div>
+            </v-tooltip>
+          </template>
+          <template v-slot:item.createdAt="{ item }">
+            {{ formatDate(item.createdAt) }}
+          </template>
+          <template v-slot:item.updateAt="{ item }">
+            {{ formatDate(item.updateAt) }}
+          </template>
+          <template v-slot:item.actions="{ item }">
+            <div class="d-flex flex-wrap align-center justify-end">
+              <v-btn
+                v-if="item.status.id === 'paused'"
+                variant="text"
+                color="success"
+                icon
+                size="small"
+                :loading="
+                  loadingInner?.remoteJid === item.remoteJid &&
+                  loadingInner?.status === 'opened'
+                "
+                :disabled="!!loadingInner"
+                @click="changeStatus(item, 'opened')"
+              >
+                <v-icon>mdi-play</v-icon>
+              </v-btn>
+              <v-btn
+                v-if="item.status.id === 'opened'"
+                variant="text"
+                color="info"
+                icon
+                size="small"
+                :loading="
+                  loadingInner?.remoteJid === item.remoteJid &&
+                  loadingInner?.status === 'paused'
+                "
+                :disabled="!!loadingInner"
+                @click="changeStatus(item, 'paused')"
+              >
+                <v-icon>mdi-pause</v-icon>
+              </v-btn>
+              <v-btn
+                variant="text"
+                color="error"
+                icon
+                size="small"
+                :loading="
+                  loadingInner?.remoteJid === item.remoteJid &&
+                  loadingInner?.status === 'closed'
+                "
+                :disabled="!!loadingInner"
+                @click="changeStatus(item, 'closed')"
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </div>
+          </template>
+        </v-data-table>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false" :disabled="loading || loadingInner">
+          Fechar
+        </v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import typebotStatus from "@/helpers/mappers/typebotStatus";
+import instanceController from "@/services/instanceController";
+export default {
+  name: "SettingsModal",
+  data: () => ({
+    dialog: false,
+    typebotStatus,
+    headers: [
+      { title: "Número", value: "remoteJid" },
+      { title: "Status", value: "status" },
+      { title: "Variáveis", value: "variables" },
+      { title: "Iniciada em", value: "createdAt" },
+      { title: "Última mensagem", value: "updateAt" },
+      { title: "", value: "actions" },
+    ],
+    loadingInner: false,
+  }),
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+    formatDate(date) {
+      return new Date(date).toLocaleString();
+    },
+    async changeStatus(session, status) {
+      try {
+        const { remoteJid } = session;
+
+        const data = {
+          remoteJid,
+          status,
+        };
+        this.loadingInner = data;
+
+        await instanceController.typebot.changeStatus(
+          this.instance.instance.instanceName,
+          data
+        );
+
+        this.$emit("refresh");
+      } catch (error) {
+        console.log(error);
+      } finally {
+        this.loadingInner = false;
+      }
+    },
+  },
+  computed: {
+    sessions() {
+      return this.data.sessions.map((session) => ({
+        ...session,
+        status: { ...typebotStatus[session.status], id: session.status },
+      }));
+    },
+  },
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>

src/helpers/mappers/typebotStatus.js

@@ -0,0 +1,19 @@
+// opened, paused, closed
+
+export default {
+  opened: {
+    color: "green",
+    text: "Aberto",
+    icon: "mdi-play",
+  },
+  paused: {
+    color: "warning",
+    text: "Pausado",
+    icon: "mdi-pause",
+  },
+  closed: {
+    color: "red",
+    text: "Fechado",
+    icon: "mdi-stop",
+  },
+}

src/services/instanceSettingsController.js

@@ -141,7 +141,16 @@ const setTypebot = async (instanceName, data) => {
     });
 }
 
-
+const changeTypebotStatus = async (instanceName, data) => {
+  return await http
+    .post("/typebot/changeStatus/:instance", data, {
+      params: { instance: instanceName }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error
+    })
+}
 
 export default {
   options: {
@@ -168,5 +177,6 @@ export default {
   typebot: {
     get: findTypebot,
     set: setTypebot,
+    changeStatus: changeTypebotStatus,
   }
 }