feat: prevent emoji in whatsapp template button

weni-ai · Nov 6, 2023 · 99fee68 · 99fee68
1 parent 871d80d
commit 99fee68
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 4 deletions.
diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
@@ -0,0 +1,61 @@
+<template>
+  <unnnic-input
+    ref="input"
+    :disabled="disabled"
+    :value="value"
+    :label="label"
+    :placeholder="placeholder"
+    :maxlength="maxlength"
+  />
+</template>
+
+<script>
+  export default {
+    name: 'BaseInput',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      placeholder: {
+        type: String,
+        default: '',
+      },
+      maxlength: {
+        type: Number,
+        default: 25,
+      },
+      replaceRegex: {
+        type: RegExp,
+        default: null,
+      },
+    },
+    mounted() {
+      const nativeInput = this.$refs.input.$el.querySelector('input');
+
+      nativeInput.addEventListener('input', () => {
+        if (this.replaceRegex) {
+          nativeInput.value = nativeInput.value.replace(this.replaceRegex, '');
+        }
+        this.$emit('input', nativeInput.value);
+      });
+      nativeInput.addEventListener('paste', () => {
+        if (this.replaceRegex) {
+          nativeInput.value = nativeInput.value.replace(this.replaceRegex, '');
+        }
+
+        this.$emit('input', nativeInput.value);
+      });
+    },
+  };
+</script>
+
+<style></style>
diff --git a/src/components/whatsAppTemplates/FormTabContentButtons.vue b/src/components/whatsAppTemplates/FormTabContentButtons.vue
@@ -49,14 +49,15 @@
           />
         </div>
 
-        <unnnic-input
+        <base-input
           class="form-tab-content-buttons__replies__input"
           :disabled="disableInputs"
           :value="currentButtons[index].text"
           :label="$t('WhatsApp.templates.form_field.reply_label')"
-          @input="handleRepliesInput($event, index)"
           :placeholder="$t('WhatsApp.templates.form_field.button_text_placeholder')"
           :maxlength="25"
+          :replaceRegex="EMOJI_REGEX"
+          @input="handleRepliesInput($event, index)"
         />
       </div>
     </div>
@@ -111,13 +112,14 @@
               currentButtons[index].button_type === 'URL',
           }"
         >
-          <unnnic-input
+          <base-input
             :label="$t('WhatsApp.templates.form_field.button_text')"
             :placeholder="$t('WhatsApp.templates.form_field.button_text_placeholder')"
             :disabled="disableInputs"
             :value="currentButtons[index].text"
-            @input="handleActionInput($event, 'text', index)"
             :maxlength="25"
+            :replaceRegex="EMOJI_REGEX"
+            @input="handleActionInput($event, 'text', index)"
           />
 
           <div
@@ -199,9 +201,11 @@
 <script>
   import { mapGetters } from 'vuex';
   import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+  import BaseInput from '../BaseInput.vue';
 
   export default {
     name: 'FormTabContentButtons',
+    components: { BaseInput },
     props: {
       disableInputs: {
         type: Boolean,
@@ -210,6 +214,7 @@
     },
     data() {
       return {
+        EMOJI_REGEX: /\p{Emoji_Presentation}/gu,
         buttonOptions: [
           {
             value: '',