From cede2765ffc830838be8a4e18490fcc48e3e8db8 Mon Sep 17 00:00:00 2001
From: "@milesibastos" <antonio@milesibastos.com>
Date: Wed, 21 Aug 2024 20:41:51 -0300
Subject: [PATCH] fix: evolution inbox

---
 .../settings/inbox/channels/Evolution.vue     | 180 ++++++++++--------
 1 file changed, 101 insertions(+), 79 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Evolution.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Evolution.vue
index 2ebf65d19af70..9bdef7394d4c0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Evolution.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Evolution.vue
@@ -1,70 +1,10 @@
-<template>
-  <form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.channelName.$error }">
-        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
-        <input
-          v-model.trim="channelName"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
-          @blur="$v.channelName.$touch"
-        />
-        <span v-if="$v.channelName.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR')
-        }}</span>
-      </label>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.webhookUrl.$error }">
-        {{ $t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.LABEL') }}
-        <input
-          v-model.trim="webhookUrl"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.PLACEHOLDER')"
-          @blur="$v.webhookUrl.$touch"
-        />
-        <span v-if="$v.webhookUrl.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.ERROR')
-        }}</span>
-      </label>
-      <p class="help-text">
-        {{ $t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.SUBTITLE') }}
-      </p>
-    </div>
-
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-      <label :class="{ error: $v.apiKey.$error }">
-        {{ $t('INBOX_MGMT.ADD.EVOLUTION.API_KEY.LABEL') }}
-        <input
-          v-model.trim="apiKey"
-          type="text"
-          :placeholder="$t('INBOX_MGMT.ADD.EVOLUTION.API_KEY.PLACEHOLDER')"
-          @blur="$v.apiKey.$touch"
-        />
-        <span v-if="$v.apiKey.$error" class="message">{{
-          $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR')
-        }}</span>
-      </label>
-      <p class="help-text">
-        {{ $t('INBOX_MGMT.ADD.EVOLUTION.API_KEY.SUBTITLE') }}
-      </p>
-    </div>
-
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
-      />
-    </div>
-  </form>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required } from '@vuelidate/validators';
 import router from '../../../../index';
+import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 
 const shouldBeWebhookUrl = (value = '') =>
   value ? value.startsWith('http') : true;
@@ -73,54 +13,136 @@ const shouldContainOnlyValidChars = (value = '') =>
   value ? /^[a-zA-Z0-9_]+$/.test(value) : true;
 
 export default {
-  mixins: [alertMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
-      channelName: '',
-      webhookUrl: '',
+      inboxName: '',
+      phoneNumber: '',
       apiKey: '',
+      webhookUrl: '',
     };
   },
   computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
+    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
   },
   validations: {
-    channelName: { shouldContainOnlyValidChars },
-    webhookUrl: { shouldBeWebhookUrl },
+    inboxName: { required, shouldContainOnlyValidChars },
+    phoneNumber: { required, isPhoneE164OrEmpty },
     apiKey: { required },
+    webhookUrl: { required, shouldBeWebhookUrl },
   },
   methods: {
     async createChannel() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
       try {
-        const apiChannel = await this.$store.dispatch(
+        const whatsappChannel = await this.$store.dispatch(
           'inboxes/createEvolutionChannel',
           {
-            name: this.channelName,
+            name: this.inboxName,
             channel: {
               type: 'api',
               webhook_url: this.webhookUrl,
               api_key: this.apiKey,
             },
-          });
+          }
+        );
 
         router.replace({
           name: 'settings_inboxes_add_agents',
           params: {
             page: 'new',
-            inbox_id: apiChannel.id,
+            inbox_id: whatsappChannel.id,
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE'));
+        useAlert(
+          error.message || this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE')
+        );
       }
     },
   },
 };
 </script>
+
+<template>
+  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.inboxName.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
+        <input
+          v-model.trim="inboxName"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
+          @blur="v$.inboxName.$touch"
+        />
+        <span v-if="v$.inboxName.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.phoneNumber.$error }">
+        {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
+        <input
+          v-model.trim="phoneNumber"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
+          @blur="v$.phoneNumber.$touch"
+        />
+        <span v-if="v$.phoneNumber.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.webhookUrl.$error }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.LABEL') }}
+        </span>
+        <input
+          v-model.trim="webhookUrl"
+          type="text"
+          :placeholder="
+            $t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.PLACEHOLDER')
+          "
+          @blur="v$.webhookUrl.$touch"
+        />
+        <span v-if="v$.webhookUrl.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.EVOLUTION.WEBHOOK_URL.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <label :class="{ error: v$.apiKey.$error }">
+        <span>
+          {{ $t('INBOX_MGMT.ADD.EVOLUTION.API_KEY.LABEL') }}
+        </span>
+        <input
+          v-model.trim="apiKey"
+          type="text"
+          :placeholder="$t('INBOX_MGMT.ADD.EVOLUTION.API_KEY.PLACEHOLDER')"
+          @blur="v$.apiKey.$touch"
+        />
+        <span v-if="v$.apiKey.$error" class="message">
+          {{ $t('INBOX_MGMT.ADD.EVOLUTION.API_KEY.ERROR') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="w-full">
+      <woot-submit-button
+        :loading="uiFlags.isCreating"
+        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      />
+    </div>
+  </form>
+</template>