[ENGAGE-5078] Refactored FormTabContent.vue to streamline the template structure and enhance user experience by removing unused input fields and logic.

package.json

@@ -22,7 +22,7 @@
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/compiler-sfc": "^3.4.23",
     "@vueuse/components": "^10.9.0",
-    "@weni/unnnic-system": "3.0.4-alpha.1",
+    "@weni/unnnic-system": "3.0.5-alpha.0",
     "axios": "^1.6.7",
     "core-js": "^3.36.0",
     "cross-env": "^7.0.3",

src/components/whatsAppTemplates/FormTabContent.vue

@@ -1,48 +1,7 @@
 <template>
   <div class="form-tab-content">
     <div class="form-tab-content__scroll">
-      <div class="form-tab-content--inline">
-        <unnnic-input
-          class="form-tab-content__input--name"
-          ref="nameInput"
-          :disabled="disableInputs || formMode !== 'create'"
-          :modelValue="templateForm?.name"
-          @update:modelValue="handleTemplateFormInput({ fieldName: 'name', fieldValue: $event })"
-          @keyup="formatTemplateName"
-          @keydown="preventTemplateName"
-          :label="$t('WhatsApp.templates.form_field.name')"
-          :placeholder="$t('WhatsApp.templates.form_field.name')"
-          :maxlength="512"
-          :type="errorStates.name.value ? 'error' : 'normal'"
-          :message="errorStates.name.message"
-        />
-
-        <unnnic-multi-select
-          ref="categorySelect"
-          :class="{
-            'form-tab-content__selects--category': true,
-            'form-tab-content__selects__disabled': disableInputs || formMode !== 'create',
-          }"
-          :inputTitle="currentCategory || $t('WhatsApp.templates.form_field.category_placeholder')"
-          :hideGroupTitle="true"
-          :label="$t('WhatsApp.templates.form_field.category')"
-          v-model="categoryGroups"
-          @update:modelValue="handleCategoryChange"
-        />
-      </div>
       <div class="divider" />
-      <div>
-        <unnnic-label :label="$t('WhatsApp.templates.form_field.language')" />
-        <unnnic-select-smart
-          :class="{ 'form-tab-content__selects__disabled': disableInputs }"
-          :disabled="disableInputs"
-          :options="availableLanguages"
-          :modelValue="templateLanguage"
-          @update:modelValue="handleLanguageSelection"
-          :selectFirst="false"
-          autocomplete
-        />
-      </div>
       <FormTabContentHeader
         class="form-tab-content__header"
         :disableInputs="disableContentInputs"
@@ -117,10 +76,6 @@
         type: String,
         default: '',
       },
-      removeLanguages: {
-        type: Array,
-        default: /* istanbul ignore next */ () => [],
-      },
       availableLanguages: {
         type: Array,
         default: /* istanbul ignore next */ () => [],
@@ -132,39 +87,7 @@
     },
     data() {
       return {
-        languageKey: 0,
-        templateCategory: [],
-        templateLanguage: [],
-        categoryGroups: [
-          {
-            title: this.$t('WhatsApp.templates.form_field.category'),
-            selected: -1,
-            items: [
-              {
-                value: 'UTILITY',
-                title: this.$t('WhatsApp.templates.category_options.utility'),
-                description: this.$t('WhatsApp.templates.category_options.utility_description'),
-              },
-              {
-                value: 'MARKETING',
-                title: this.$t('WhatsApp.templates.category_options.marketing'),
-                description: this.$t('WhatsApp.templates.category_options.marketing_description'),
-              },
-              {
-                value: 'AUTHENTICATION',
-                title: this.$t('WhatsApp.templates.category_options.authentication'),
-                description: this.$t(
-                  'WhatsApp.templates.category_options.authentication_description',
-                ),
-              },
-            ],
-          },
-        ],
         errorStates: {
-          name: {
-            value: false,
-            message: '',
-          },
           buttons: {
             value: false,
             message: '',
@@ -179,18 +102,6 @@
         );
       }
     },
-    mounted() {
-      const nativeNameInput = this.$refs.nameInput.$el.querySelector('input');
-
-      nativeNameInput.addEventListener('paste', (event) => {
-        event.preventDefault();
-        nativeNameInput.value = event.clipboardData
-          .getData('Text')
-          .replaceAll(' ', '_')
-          .replaceAll('-', '_')
-          .toLowerCase();
-      });
-    },
     beforeUnmount() {
       this.resetTemplates();
     },
@@ -236,27 +147,6 @@
         'updateTemplateTranslationForm',
         'resetTemplates',
       ]),
-      preventTemplateName(event) {
-        if (!event.key.match(/[a-zA-Z0-9_]+/)) {
-          event.preventDefault();
-        }
-      },
-      formatTemplateName(event) {
-        var textValue = event.srcElement.value;
-        textValue = textValue.replace(/ /g, '_').toLowerCase();
-        event.srcElement.value = textValue;
-      },
-      handleTemplateFormInput({ fieldName, fieldValue }) {
-        if (fieldName === 'name') {
-          const exists = this.verifyExistingName(fieldValue);
-          this.errorStates.name.value = !!exists;
-
-          this.errorStates.name.message = exists
-            ? this.$t('WhatsApp.templates.form_field.name_exists')
-            : '';
-        }
-        this.updateTemplateForm({ fieldName, fieldValue });
-      },
       handleGenericInput({ fieldName, fieldValue, hasIssue = false }) {
         if (hasIssue) {
           this.errorStates[fieldName].value = true;
@@ -268,65 +158,10 @@
           fieldValue,
         });
       },
-      handleCategoryChange(event) {
-        this.categoryGroups = event;
-        const selectedCategory = event[0].items[event[0].selected];
-
-        this.handleTemplateFormInput({ fieldName: 'category', fieldValue: selectedCategory.value });
-        this.$refs.categorySelect.active = false;
-      },
-      handleLanguageSelection(value) {
-        if (value.length === 0 && this.templateTranslationSelectedForm !== 'New Language') {
-          this.setTemplateTranslationCurrentForm = 'New Language';
-          this.updateTemplateTranslationForm({
-            formName: this.selectedForm,
-            fieldName: 'language',
-            fieldValue: '',
-          });
-          this.$emit('language-change', 'new');
-          return;
-        } else if (this.templateLanguage === value || value.length > 1) {
-          return;
-        }
-        this.templateLanguage = value;
-        const selectedLanguage = this.availableLanguages.find(
-          (item) => item.value === value[0].value,
-        );
-        if (!selectedLanguage) {
-          unnnic.unnnicCallAlert({
-            props: {
-              text: this.$t('WhatsApp.templates.error.unexpected_language'),
-              type: 'error',
-            },
-          });
-          return;
-        }
-        if (this.removeLanguages.includes(selectedLanguage.label)) {
-          unnnic.unnnicCallAlert({
-            props: {
-              text: this.$t('WhatsApp.templates.error.language_already_exists'),
-              type: 'error',
-            },
-          });
-          return;
-        }
-
-        if (this.templateTranslationCurrentForm?.uuid) return;
-        this.updateTemplateTranslationForm({
-          formName: this.selectedForm,
-          fieldName: 'language',
-          fieldValue: selectedLanguage.value,
-        });
-        this.$emit('language-change', selectedLanguage.label);
-        this.languageKey += 1;
-      },
       closeEdit() {
         const tablePath = this.$router.currentRoute.value.path.split('templates')[0] + 'templates';
         this.$router.push(tablePath);
       },
-      verifyExistingName(templateName) {
-        return this.whatsAppTemplates.results.find((template) => template.name === templateName);
-      },
       saveTemplate() {
         let validFields = true;
         for (const key in this.errorStates) {
@@ -351,16 +186,6 @@
         }
       },
     },
-    watch: {
-      templateTranslationCurrentForm(newval) {
-        if (newval?.language !== this.templateLanguage) {
-          const selectedLanguage = this.availableLanguages.filter(
-            (item) => item.value === newval.language,
-          );
-          this.templateLanguage = selectedLanguage;
-        }
-      },
-    },
   };
 </script>
 

src/components/whatsAppTemplates/FormTabContentHeader.vue

@@ -162,6 +162,7 @@
     &__inputs {
       display: flex;
       gap: $unnnic-spacing-inline-md;
+      align-items: end;
 
       &__selector {
         min-width: fit-content;