From b1dca46d9d37839f68827b66eab0f5903c2b382b Mon Sep 17 00:00:00 2001
From: Paulo Bernardo <paulo.bernardo@weni.ai>
Date: Mon, 6 Nov 2023 17:03:39 -0300
Subject: [PATCH] feat: display error when button has variables

---
 src/components/BaseInput.vue                  | 13 +++++++++
 .../whatsAppTemplates/FormTabContent.vue      | 10 ++++++-
 .../FormTabContentButtons.vue                 | 28 +++++++++++++++++++
 src/locales/en.json                           |  3 +-
 src/locales/es_es.json                        |  3 +-
 src/locales/pt_br.json                        |  3 +-
 6 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
index 111593ce..80545c2e 100644
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -6,6 +6,8 @@
     :label="label"
     :placeholder="placeholder"
     :maxlength="maxlength"
+    :message="message"
+    :type="type"
   />
 </template>
 
@@ -33,6 +35,17 @@
         type: Number,
         default: 25,
       },
+      message: {
+        type: String,
+        default: null,
+      },
+      type: {
+        type: String,
+        default: 'normal',
+        validator(value) {
+          return ['normal', 'error'].indexOf(value) !== -1;
+        },
+      },
       replaceRegex: {
         type: RegExp,
         default: null,
diff --git a/src/components/whatsAppTemplates/FormTabContent.vue b/src/components/whatsAppTemplates/FormTabContent.vue
index dc293d52..cc93dc0d 100644
--- a/src/components/whatsAppTemplates/FormTabContent.vue
+++ b/src/components/whatsAppTemplates/FormTabContent.vue
@@ -172,6 +172,10 @@
             value: false,
             message: '',
           },
+          buttons: {
+            value: false,
+            message: '',
+          },
         },
       };
     },
@@ -242,7 +246,11 @@
         }
         this.updateTemplateForm({ fieldName, fieldValue });
       },
-      handleGenericInput({ fieldName, fieldValue }) {
+      handleGenericInput({ fieldName, fieldValue, hasIssue = false }) {
+        if (hasIssue) {
+          this.errorStates[fieldName].value = true;
+        }
+
         this.updateTemplateTranslationForm({
           formName: this.selectedForm,
           fieldName,
diff --git a/src/components/whatsAppTemplates/FormTabContentButtons.vue b/src/components/whatsAppTemplates/FormTabContentButtons.vue
index 2c429875..893e385a 100644
--- a/src/components/whatsAppTemplates/FormTabContentButtons.vue
+++ b/src/components/whatsAppTemplates/FormTabContentButtons.vue
@@ -57,6 +57,8 @@
           :placeholder="$t('WhatsApp.templates.form_field.button_text_placeholder')"
           :maxlength="25"
           :replaceRegex="EMOJI_REGEX"
+          :message="errors[index] || null"
+          :type="errors[index] ? 'error' : 'normal'"
           @input="handleRepliesInput($event, index)"
         />
       </div>
@@ -201,6 +203,7 @@
 <script>
   import { mapGetters } from 'vuex';
   import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+  import { countVariables } from '@/utils/countTemplateVariables.js';
   import BaseInput from '../BaseInput.vue';
 
   export default {
@@ -247,6 +250,7 @@
         }),
 
         buttons: [],
+        errors: {},
         maxRepliesButtons: 3,
         maxActionButtons: 2,
         focusedUrlInput: false,
@@ -286,6 +290,16 @@
     },
     methods: {
       getCountryCallingCode,
+      checkIssues() {
+        let hasIssues = false;
+        for (const key in this.errors) {
+          if (this.errors[key]) {
+            hasIssues = true;
+          }
+        }
+
+        return hasIssues;
+      },
       handleButtonTypeChange(event) {
         if (event === this.buttonsType) {
           return;
@@ -309,10 +323,17 @@
         this.$emit('input-change', { fieldName: 'buttonsType', fieldValue: event });
       },
       handleRepliesInput(event, index) {
+        if (countVariables(event) > 0) {
+          this.errors[index] = this.$t('WhatsApp.templates.form_field.error_has_variable');
+        } else {
+          this.errors[index] = null;
+        }
+
         this.buttons[index].text = event;
         this.$emit('input-change', {
           fieldName: 'buttons',
           fieldValue: [...this.buttons],
+          hasIssue: this.checkIssues(),
         });
       },
       handleCallToActionTypeChange(event, index) {
@@ -337,10 +358,17 @@
         });
       },
       handleActionInput(event, inputName, index) {
+        if (countVariables(event) > 0) {
+          this.errors[index] = this.$t('WhatsApp.templates.form_field.error_has_variable');
+        } else {
+          this.errors[index] = null;
+        }
+
         this.buttons[index][inputName] = event;
         this.$emit('input-change', {
           fieldName: 'buttons',
           fieldValue: [...this.buttons],
+          hasIssue: this.checkIssues(),
         });
       },
       handleCountryCodeSelection(event, index) {
diff --git a/src/locales/en.json b/src/locales/en.json
index a3775578..765c3470 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -610,7 +610,8 @@
         "button_text": "Button text",
         "phone_number_placeholder": "Enter the phone number",
         "url_placeholder": "Enter the Website URL",
-        "footer_text_placeholder": "Enter the footer text"
+        "footer_text_placeholder": "Enter the footer text",
+        "error_has_variable": "Template buttons cannot contain variables"
       },
       "category_options": {
         "marketing": "Marketing",
diff --git a/src/locales/es_es.json b/src/locales/es_es.json
index 040c2a45..646bf78f 100644
--- a/src/locales/es_es.json
+++ b/src/locales/es_es.json
@@ -610,7 +610,8 @@
         "button_text": "Texto del botón",
         "phone_number_placeholder": "Ingrese el número de teléfono",
         "url_placeholder": "Ingrese la URL del sitio web",
-        "footer_text_placeholder": "Escribe el texto de pie de página"
+        "footer_text_placeholder": "Escribe el texto de pie de página",
+        "error_has_variable": "Los botones de plantilla no pueden contener variables"
       },
       "category_options": {
         "marketing": "Marketing",
diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
index 64b898cc..d6617492 100644
--- a/src/locales/pt_br.json
+++ b/src/locales/pt_br.json
@@ -610,7 +610,8 @@
         "button_text": "Texto do botão",
         "phone_number_placeholder": "Escreva o número de telefone",
         "url_placeholder": "Escreva a URL do website",
-        "footer_text_placeholder": "Escreva o texto do rodapé"
+        "footer_text_placeholder": "Escreva o texto do rodapé",
+        "error_has_variable": "Os botões de modelo não podem conter variáveis"
       },
       "category_options": {
         "marketing": "Marketing",