profile tab

src/components/instance/InstanceBody.vue

@@ -8,7 +8,7 @@
 
   <v-window v-model="tab">
     <v-window-item v-for="tab in tabs" :key="tab.id" :value="tab.id">
-      <div class="d-flex flex-column gap-8">
+      <div class="d-flex flex-column gap-6">
         <component
           v-for="component in tab.components"
           :key="component"
@@ -33,6 +33,10 @@ import MyGroups from "./message/MyGroups.vue";
 import MyChats from "./message/MyChats.vue";
 import MyContacts from "./message/MyContacts.vue";
 import HasWhatsapp from "./message/HasWhatsapp.vue";
+
+import ConnectionAlert from "./profile/ConnectionAlert.vue";
+import BasicInfo from "./profile/BasicInfo.vue";
+import Privacy from "./profile/Privacy.vue";
 export default {
   components: {
     Options,
@@ -46,6 +50,9 @@ export default {
     MyChats,
     HasWhatsapp,
     MyContacts,
+    ConnectionAlert,
+    BasicInfo,
+    Privacy,
   },
   data: () => ({
     tab: "settings",
@@ -75,6 +82,12 @@ export default {
           "MyChats",
         ],
       },
+      {
+        id: "profile",
+        icon: "mdi-account",
+        title: "Perfil",
+        components: ["ConnectionAlert", "BasicInfo", "Privacy"],
+      },
     ],
   }),
   props: {

src/components/instance/profile/BasicInfo.vue

@@ -0,0 +1,173 @@
+<template>
+  <v-card variant="outlined" :loading="loading">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
+      <v-icon start>mdi-account</v-icon>
+      Nome e Recado
+
+      <v-spacer></v-spacer>
+      <v-btn
+        size="small"
+        icon
+        :disabled="loading"
+        variant="tonal"
+        @click.stop="toggleExpanded"
+        :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
+      >
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+    </v-card-title>
+    <v-card-text v-if="expanded">
+      <v-alert v-if="error" type="error" class="mb-3">
+        {{ error }}
+      </v-alert>
+
+      <v-form v-model="valid" class="d-flex flex-column gap-2">
+        <v-text-field
+          class="flex-grow-1 flex-shrink-0"
+          v-model="data.name"
+          :disabled="true || loading"
+          label="Nome"
+          counter
+          maxlength="25"
+          :rules="[
+            (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"
+          v-model="data.status"
+          :disabled="loading"
+          label="Recado (Status)"
+          :rules="[
+            (v) => !!v || 'Nome é obrigatório',
+            (v) =>
+              v.length <= 139 || 'Recado deve ter no máximo 139 caracteres',
+          ]"
+          counter
+          maxlength="139"
+        ></v-text-field>
+      </v-form>
+    </v-card-text>
+    <v-card-actions v-if="expanded">
+      <v-spacer></v-spacer>
+      <v-btn
+        :disabled="
+          !valid ||
+          JSON.stringify(data) === JSON.stringify(defaultData) ||
+          !isOpen
+        "
+        :loading="loading"
+        color="primary"
+        @click="saveOptions"
+        variant="tonal"
+      >
+        Salvar
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+import { useAppStore } from "@/store/app";
+export default {
+  name: "BasicInfo",
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    AppStore: useAppStore(),
+
+    expanded: false,
+    loading: false,
+    error: false,
+    valid: false,
+    data: {
+      name: "",
+      status: "",
+    },
+    defaultData: {
+      name: "",
+      status: "",
+    },
+  }),
+
+  methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
+    async saveOptions() {
+      try {
+        this.loading = true;
+        this.error = false;
+
+        if (!this.isOpen) return;
+
+        if (this.data.name !== this.defaultData.name)
+          await instanceController.profile.updateName(
+            this.instance.instance.instanceName,
+            this.data.name
+          );
+
+        if (this.data.status !== this.defaultData.status)
+          await instanceController.profile.updateStatus(
+            this.instance.instance.instanceName,
+            this.data.status
+          );
+
+        await this.AppStore.reconnect();
+        this.loadOptions();
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadOptions() {
+      try {
+        this.loading = true;
+        this.error = false;
+        const instance = this.instance.instance;
+        const { isOpen } = this;
+        var data = {
+          name: isOpen ? instance.profileName || "" : "",
+          status: isOpen ? instance.profileStatus || "" : "",
+        };
+
+        this.data = Object.assign({}, data);
+        this.defaultData = Object.assign({}, data);
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+
+  computed: {
+    isOpen() {
+      return this.instance.instance.status === "open";
+    },
+  },
+  watch: {
+    expanded(val) {
+      if (val) this.loadOptions();
+    },
+  },
+};
+</script>
+
+<style></style>

src/components/instance/profile/ConnectionAlert.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-alert v-if="instance.instance.status != 'open'" type="error" class="mb-0">
+    Não é possível alterar o perfil de uma instância desconectada.
+  </v-alert>
+</template>
+
+<script>
+
+export default {
+  name: "ConnectionAlert",
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+
+  methods: {},
+
+  watch: {},
+};
+</script>
+
+<style></style>

src/components/instance/profile/Privacy.vue

@@ -0,0 +1,224 @@
+<template>
+  <v-card variant="outlined" :loading="loading">
+    <v-card-title
+      class="d-flex align-center"
+      @click="toggleExpanded"
+      style="cursor: pointer"
+      v-ripple
+    >
+      <v-icon start>mdi-shield-account</v-icon>
+      Privacidade
+      <v-spacer></v-spacer>
+      <v-btn
+        size="small"
+        icon
+        :disabled="loading"
+        variant="tonal"
+        @click.stop="toggleExpanded"
+        :style="{ transform: expanded ? 'rotate(180deg)' : '' }"
+      >
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+    </v-card-title>
+    <v-card-text v-if="expanded">
+      <v-alert v-if="error" type="error" class="mb-3">
+        {{ error }}
+      </v-alert>
+
+      <v-form v-model="valid">
+        <v-select
+          v-model="privacyData.last"
+          :items="WAPrivacyValue"
+          label="Visto por último"
+          :rules="[(v) => !!v || 'Visto por último é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-clock-outline"
+        ></v-select>
+        <v-select
+          v-model="privacyData.online"
+          :items="WAPrivacyOnlineValue"
+          label="Online"
+          :rules="[(v) => !!v || 'Online é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-cellphone"
+        ></v-select>
+        <v-select
+          v-model="privacyData.profile"
+          :items="WAPrivacyValue"
+          label="Foto do Perfil"
+          :rules="[(v) => !!v || 'Foto de Perfil é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-account-box"
+        ></v-select>
+        <v-select
+          v-model="privacyData.status"
+          :items="WAPrivacyValue"
+          label="Recado (Status)"
+          :rules="[(v) => !!v || 'Recado é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-text-short"
+        ></v-select>
+        <v-select
+          v-model="privacyData.readreceipts"
+          :items="WAReadReceiptsValue"
+          label="Confirmação de leitura"
+          :rules="[(v) => !!v || 'Confirmação de leitura é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-check-all"
+        ></v-select>
+        <v-select
+          v-model="privacyData.groupadd"
+          :items="WAPrivacyValue"
+          label="Ser adicionado em grupos"
+          :rules="[(v) => !!v || 'Ser adicionado em grupos é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-account-multiple-plus"
+        ></v-select>
+        <v-select
+          v-model="privacyData.calladd"
+          :items="WAPrivacyValue"
+          label="Ser adicionado em chamadas"
+          color="primary"
+          :rules="[(v) => !!v || 'Ser adicionado em chamadas é obrigatório']"
+          density="comfortable"
+          prepend-inner-icon="mdi-phone-plus"
+        ></v-select>
+      </v-form>
+    </v-card-text>
+    <v-card-actions v-if="expanded" class="d-flex flex-wrap gap-x-1">
+      <v-spacer></v-spacer>
+      <v-btn
+        :disabled="
+          !valid ||
+          JSON.stringify(privacyData) === JSON.stringify(defaultPrivacyData)
+        "
+        :loading="loading"
+        color="primary"
+        @click="savePrivacy"
+        variant="tonal"
+      >
+        Salvar
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+  <chatwoot-config :instance="instance" ref="chatwootConfig" />
+</template>
+
+<script>
+import instanceController from "@/services/instanceController";
+import { useAppStore } from "@/store/app";
+
+const defaultObj = () => ({
+  enabled: false,
+  url: "",
+  account_id: "",
+  token: "",
+  sign_msg: true,
+  reopen_conversation: true,
+  conversation_pending: false,
+});
+
+export default {
+  name: "ProfilePrivacy",
+  props: {
+    instance: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    AppStore: useAppStore(),
+    expanded: false,
+    loading: false,
+    error: false,
+    valid: false,
+    WAPrivacyValue: [
+      { value: "all", title: "Todos" },
+      { value: "contacts", title: "Contatos" },
+      { value: "contact_blacklist", title: "Contatos exeto os da lista negra" },
+      { value: "none", title: "Ninguém" },
+    ],
+    WAPrivacyOnlineValue: [
+      { value: "all", title: "Todos" },
+      { value: "match_last_seen", title: "Igual ao visto por último" },
+    ],
+    WAReadReceiptsValue: [
+      { value: "all", title: "Todos" },
+      { value: "none", title: "Ninguém" },
+    ],
+
+    privacyData: {
+      readreceipts: "all",
+      profile: "all",
+      status: "all",
+      online: "all",
+      last: "all",
+      groupadd: "all",
+      calladd: "all",
+    },
+    defaultChatwootData: {
+      readreceipts: "all",
+      profile: "all",
+      status: "all",
+      online: "all",
+      last: "all",
+      groupadd: "all",
+      calladd: "all",
+    },
+  }),
+  methods: {
+    toggleExpanded() {
+      if (this.loading) return;
+      this.expanded = !this.expanded;
+    },
+    chatwootConfig() {
+      this.$refs.chatwootConfig.open();
+    },
+    async savePrivacy() {
+      try {
+        this.loading = true;
+        this.error = false;
+        await instanceController.profile.updatePrivacy(
+          this.instance.instance.instanceName,
+          this.privacyData
+        );
+        this.defaultPrivacyData = Object.assign({}, this.privacyData);
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+    async loadPrivacy() {
+      try {
+        this.loading = true;
+        this.error = false;
+        const privacyData = await instanceController.profile.getPrivacy(
+          this.instance.instance.instanceName
+        );
+        this.privacyData = Object.assign(defaultObj(), privacyData || {});
+        this.defaultPrivacyData = Object.assign(
+          defaultObj(),
+          privacyData || {}
+        );
+      } catch (e) {
+        this.error = e.message?.message || e.message || e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  computed: {
+    isOpen() {
+      return this.instance.instance.status === "open";
+    },
+  },
+  watch: {
+    expanded(expanded) {
+      if (expanded) this.loadPrivacy();
+    },
+  },
+};
+</script>
+
+<style></style>

src/services/instanceController.js

@@ -74,7 +74,7 @@ const deleteInstance = async (instanceName) => {
 import settings from "./instanceSettingsController.js";
 import group from "./instanceGroupController.js";
 import chat from "./instanceChatController.js";
-
+import profile from "./instanceProfileController.js";
 export default {
   fetchAll,
   create,
@@ -84,6 +84,6 @@ export default {
   delete: deleteInstance,
   ...settings,
   group,
-  chat
+  chat,
-
+  profile,
 };

src/services/instanceProfileController.js

@@ -0,0 +1,62 @@
+
+import http from "../http-common";
+
+const updateName = async (instanceName, name) => {
+  return await http
+    .post("/chat/updateProfileName/:instance", { name }, {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+const updateStatus = async (instanceName, status) => {
+  return await http
+    .post("/chat/updateProfileStatus/:instance", { status }, {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+const getPrivacy = async (instanceName) => {
+  return await http
+    .get("/chat/fetchPrivacySettings/:instance", {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+const updatePrivacy = async (instanceName, privacySettings) => {
+  return await http
+    .put("/chat/updatePrivacySettings/:instance", { privacySettings }, {
+      params: {
+        instance: instanceName
+      }
+    })
+    .then((r) => r.data)
+    .catch((error) => {
+      throw error.response?.data || error.response || error;
+    });
+}
+
+
+export default {
+  updateName: updateName,
+  updateStatus: updateStatus,
+  getPrivacy: getPrivacy,
+  updatePrivacy: updatePrivacy
+}