fix: templates in whatsapp (#9862)

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -30,7 +30,7 @@
       </p>
     </div>
     <footer>
-      <woot-button variant="smooth" @click="$emit('resetTemplate')">
+      <woot-button variant="smooth" @click="resetTemplate">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL') }}
       </woot-button>
       <woot-button type="button" @click="sendMessage">
@@ -41,82 +41,108 @@
 </template>
 
 <script>
+/**
+ * This component handles parsing and sending WhatsApp message templates.
+ * It works as follows:
+ * 1. Displays the template text with variable placeholders.
+ * 2. Generates input fields for each variable in the template.
+ * 3. Validates that all variables are filled before sending.
+ * 4. Replaces placeholders with user-provided values.
+ * 5. Emits events to send the processed message or reset the template.
+ */
+import { ref, computed, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
-const allKeysRequired = value => {
-  const keys = Object.keys(value);
-  return keys.every(key => value[key]);
-};
+
 export default {
   props: {
     template: {
       type: Object,
-      default: () => {},
+      default: () => ({}),
     },
   },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  validations: {
-    processedParams: {
-      requiredIfKeysPresent: requiredIf('variables'),
-      allKeysRequired,
-    },
-  },
-  data() {
-    return {
-      processedParams: {},
+  setup(props, { emit }) {
+    const processVariable = str => {
+      return str.replace(/{{|}}/g, '');
     };
-  },
-  computed: {
-    variables() {
-      const variables = this.templateString.match(/{{([^}]+)}}/g);
-      return variables;
-    },
-    templateString() {
-      return this.template.components.find(
+
+    const allKeysRequired = value => {
+      const keys = Object.keys(value);
+      return keys.every(key => value[key]);
+    };
+
+    const processedParams = ref({});
+
+    const templateString = computed(() => {
+      return props.template.components.find(
         component => component.type === 'BODY'
       ).text;
-    },
-    processedString() {
-      return this.templateString.replace(/{{([^}]+)}}/g, (match, variable) => {
-        const variableKey = this.processVariable(variable);
-        return this.processedParams[variableKey] || `{{${variable}}}`;
+    });
+
+    const variables = computed(() => {
+      return templateString.value.match(/{{([^}]+)}}/g);
+    });
+
+    const processedString = computed(() => {
+      return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+        const variableKey = processVariable(variable);
+        return processedParams.value[variableKey] || `{{${variable}}}`;
       });
-    },
-  },
-  mounted() {
-    this.generateVariables();
-  },
-  methods: {
-    sendMessage() {
-      this.v$.$touch();
-      if (this.v$.$invalid) return;
-      const payload = {
-        message: this.processedString,
-        templateParams: {
-          name: this.template.name,
-          category: this.template.category,
-          language: this.template.language,
-          namespace: this.template.namespace,
-          processed_params: this.processedParams,
+    });
+
+    const v$ = useVuelidate(
+      {
+        processedParams: {
+          requiredIfKeysPresent: requiredIf(variables),
+          allKeysRequired,
         },
-      };
-      this.$emit('sendMessage', payload);
-    },
-    processVariable(str) {
-      return str.replace(/{{|}}/g, '');
-    },
-    generateVariables() {
-      const matchedVariables = this.templateString.match(/{{([^}]+)}}/g);
+      },
+      { processedParams }
+    );
+
+    const generateVariables = () => {
+      const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
       if (!matchedVariables) return;
 
-      const variables = matchedVariables.map(i => this.processVariable(i));
-      this.processedParams = variables.reduce((acc, variable) => {
+      const finalVars = matchedVariables.map(i => processVariable(i));
+      processedParams.value = finalVars.reduce((acc, variable) => {
         acc[variable] = '';
         return acc;
       }, {});
-    },
+    };
+
+    const resetTemplate = () => {
+      emit('resetTemplate');
+    };
+
+    const sendMessage = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+
+      const payload = {
+        message: processedString.value,
+        templateParams: {
+          name: props.template.name,
+          category: props.template.category,
+          language: props.template.language,
+          namespace: props.template.namespace,
+          processed_params: processedParams.value,
+        },
+      };
+      emit('sendMessage', payload);
+    };
+
+    onMounted(generateVariables);
+
+    return {
+      processedParams,
+      variables,
+      templateString,
+      processedString,
+      v$,
+      resetTemplate,
+      sendMessage,
+    };
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -285,10 +285,6 @@ export default {
       type: Function,
       default: () => {},
     },
-    channelType: {
-      type: String,
-      default: '',
-    },
   },
   setup() {
     const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =

app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js

@@ -4,6 +4,7 @@ import { templates } from './fixtures';
 const localVue = createLocalVue();
 import VueI18n from 'vue-i18n';
 import i18n from 'dashboard/i18n';
+import { nextTick } from 'vue';
 
 localVue.use(VueI18n);
 
@@ -18,30 +19,32 @@ const config = {
 };
 
 describe('#WhatsAppTemplates', () => {
-  it('returns all variables from a template string', () => {
+  it('returns all variables from a template string', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[0] },
     });
+    await nextTick();
     expect(wrapper.vm.variables).toEqual(['{{1}}', '{{2}}', '{{3}}']);
   });
 
-  it('returns no variables from a template string if it does not contain variables', () => {
+  it('returns no variables from a template string if it does not contain variables', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[12] },
     });
+    await nextTick();
     expect(wrapper.vm.variables).toBeNull();
   });
 
-  it('returns the body of a template', () => {
+  it('returns the body of a template', async () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[1] },
     });
-    const expectedOutput = templates[1].components.find(
-      i => i.type === 'BODY'
-    ).text;
+    await nextTick();
+    const expectedOutput =
+      templates[1].components.find(i => i.type === 'BODY')?.text || '';
     expect(wrapper.vm.templateString).toEqual(expectedOutput);
   });
 
@@ -49,14 +52,12 @@ describe('#WhatsAppTemplates', () => {
     const wrapper = shallowMount(TemplateParser, {
       ...config,
       propsData: { template: templates[0] },
-      data: () => {
-        return { processedParams: {} };
-      },
     });
+    await nextTick();
     await wrapper.setData({
       processedParams: { 1: 'abc', 2: 'xyz', 3: 'qwerty' },
     });
-    await wrapper.vm.$nextTick();
+    await nextTick();
     const expectedOutput =
       'Esta é a sua confirmação de voo para abc-xyz em qwerty.';
     expect(wrapper.vm.processedString).toEqual(expectedOutput);