From bb36f11c5e2fccd2adfb993d6d7e8111e7bf07be Mon Sep 17 00:00:00 2001
From: Gabriel Pastori <58153955+gabrielpastori1@users.noreply.github.com>
Date: Sat, 16 Dec 2023 17:09:43 -0300
Subject: [PATCH] translate chatwoot config

---
 src/components/instance/settings/Chatwoot.vue |  2 +-
 src/components/modal/ChatwootConfig.vue       | 39 +++++++++++--------
 src/i18n/en.js                                | 13 +++++++
 src/i18n/pt.js                                | 13 +++++++
 4 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/instance/settings/Chatwoot.vue b/src/components/instance/settings/Chatwoot.vue
index 7447586..570949d 100644
--- a/src/components/instance/settings/Chatwoot.vue
+++ b/src/components/instance/settings/Chatwoot.vue
@@ -167,7 +167,7 @@
         hide-details
       ></v-switch>
       <v-btn variant="text" @click="chatwootConfig" size="small">
-        Como configurar o chatwoot?
+       {{ $t("chatwoot.config.btn") }}
       </v-btn>
       <v-spacer></v-spacer>
       <v-btn
diff --git a/src/components/modal/ChatwootConfig.vue b/src/components/modal/ChatwootConfig.vue
index e744ec3..b3477a8 100644
--- a/src/components/modal/ChatwootConfig.vue
+++ b/src/components/modal/ChatwootConfig.vue
@@ -1,26 +1,28 @@
 <template>
   <v-dialog v-model="dialog" max-width="700px" scrollable>
     <v-card>
-      <v-card-title>
-        Como configurar a caixa de entrada do chatwoot?
-      </v-card-title>
+      <v-card-title>{{ $t("chatwoot.config.title") }}</v-card-title>
 
       <v-card-text>
         <p>
-          <b>Passo 1:</b> Acesse as configurações > Caixa de Entrada e
-          "Adicionar Caixa"
+          <b>{{ $t("step", { step: 1 }) }}:</b>
+          {{ $t("chatwoot.config.steps.1") }}
+        </p>
+        <p class="mt-2">
+          <b>{{ $t("step", { step: 2 }) }}:</b>
+          {{ $t("chatwoot.config.steps.2") }}
+
+          <v-img src="@/assets/chatwoot/chatwoot_api.png" class="ma-4 elevation-10" />
         </p>
-        <p class="mt-2"><b>Passo 2:</b> Selecione "API" como tipo de caixa</p>
-        <v-img src="@/assets/chatwoot/chatwoot_api.png" />
 
         <p class="mt-2 mb-1">
-          <b>Passo 3:</b> Preencha nome da caixa e webhook. Os valores devem ser
-          exatamente os seguintes:
+          <b>{{ $t("step", { step: 3 }) }}:</b>
+          {{ $t("chatwoot.config.steps.3") }}
         </p>
         <div class="d-flex flex-wrap gap-2">
           <v-text-field
             v-model="instanceName"
-            label="Nome"
+            label="Name"
             readonly
             variant="solo-filled"
             hide-details
@@ -48,28 +50,31 @@
         <v-img src="@/assets/chatwoot/chatwoot_api_1.png" />
 
         <!-- Step 4: Add agents to the inbox. -->
-        <p><b>Passo 4:</b> Adicione os agentes à caixa de entrada.</p>
+        <p>
+          <b>{{ $t("step", { step: 4 }) }}</b>
+          {{ $t("chatwoot.config.steps.4") }}
+        </p>
         <v-img src="@/assets/chatwoot/chatwoot_api_2.png" />
 
         <!-- Step 5: Ready. -->
-        <p><b>Passo 5:</b> Pronto! Agora você pode receber mensagens.</p>
+        <p>
+          <b>{{ $t("step", { step: 5 }) }}</b>
+          {{ $t("chatwoot.config.steps.5") }}
+        </p>
         <v-img src="@/assets/chatwoot/chatwoot_api_3.png" />
 
-        <!-- Add link to chatwoot doc -->
-        <!-- https://www.chatwoot.com/docs/product/channels/api/create-channel -->
         <v-btn
-          size="small"
           variant="text"
           block
           href="https://www.chatwoot.com/docs/product/channels/api/create-channel"
           target="_blank"
         >
-          Ver documentação completa
+          {{ $t("chatwoot.config.fullDoc") }}
         </v-btn>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn text @click="dialog = false"> fechar </v-btn>
+        <v-btn text @click="dialog = false"> {{ $t("close") }} </v-btn>
         <v-spacer></v-spacer>
       </v-card-actions>
     </v-card>
diff --git a/src/i18n/en.js b/src/i18n/en.js
index b0c493e..d47268d 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -12,6 +12,7 @@ export default {
   disconnect: "Disconnect",
   sure: "Sure?",
   save: "Save",
+  step: "Passo {step}",
   instance: "Instance | Instances",
   search: "Search",
   loading: "Loading",
@@ -80,6 +81,18 @@ export default {
     conversationPendingHelp: "Starts the conversation as pending instead of open",
     autoCreate: "Create Inbox",
     autoCreateHelp: "Creates the inbox in Chatwoot if it doesn't exist",
+    config: {
+      btn: "How to configure Chatwoot?",
+      title: "How to configure Chatwoot inbox?",
+      fullDoc: "View full documentation",
+      steps: {
+        "1": "Access settings > Inbox and click on \"Add Inbox\"",
+        "2": "Select \"API\" as the inbox type",
+        "3": "Fill in the inbox name and webhook. The values should be exactly as follows:",
+        "4": "Add agents to the inbox.",
+        "5": "Done! Now you can receive messages.",
+      }
+    }
   },
   typebot: {
     typebot: "Typebot flow name",
diff --git a/src/i18n/pt.js b/src/i18n/pt.js
index 2c48d4e..82f9c56 100644
--- a/src/i18n/pt.js
+++ b/src/i18n/pt.js
@@ -12,6 +12,7 @@ export default {
   disconnect: "Desconectar",
   sure: "Tem certeza?",
   save: "Salvar",
+  step: "Passo {step}",
   instance: "Instância | Instâncias",
   search: "Pesquisar",
   loading: "Carregando",
@@ -80,6 +81,18 @@ export default {
     conversationPendingHelp: "Inicia a conversa como pendente ao invés de aberta",
     autoCreate: "Criar Caixa de Entrada",
     autoCreateHelp: "Cria a caixa de entrada no Chatwoot caso ela não exista",
+    config: {
+      btn: "Como configurar o chatwoot?",
+      title: "Como configurar a caixa de entrada do Chatwoot?",
+      fullDoc: "Ver documentação completa",
+      steps: {
+        "1": "Acesse as configurações > Caixa de Entrada e \"Adicionar Caixa\"",
+        "2": "Selecione \"API\" como tipo de caixa",
+        "3": "Preencha nome da caixa e webhook. Os valores devem ser exatamente os seguintes:",
+        "4": "Adicione os agentes à caixa de entrada.",
+        "5": "Pronto! Agora você pode receber mensagens.",
+      }
+    }
   },
   typebot: {
     typebot: "Nome do fluxo do Typebot",