fix: Remove validation for WhatsApp templates with no params (#4820)

chatwoot · Jun 9, 2022 · c5c8944 · c5c8944
1 parent 6385e42
commit c5c8944
Show file tree

Hide file tree

Showing 3 changed files with 375 additions and 40 deletions.
diff --git a/...javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue b/...javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -6,30 +6,28 @@
       readonly
       class="template-input"
     ></textarea>
-    <div>
-      <div class="template__variables-container">
-        <p class="variables-label">
-          {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-        </p>
-        <div
-          v-for="(variable, key) in processedParams"
-          :key="key"
-          class="template__variable-item"
-        >
-          <span class="variable-label">
-            {{ key }}
-          </span>
-          <woot-input
-            v-model="processedParams[key]"
-            type="text"
-            class="variable-input"
-            :styles="{ marginBottom: 0 }"
-          />
-        </div>
-        <p v-if="showRequiredMessage" class="error">
-          {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
-        </p>
+    <div v-if="variables" class="template__variables-container">
+      <p class="variables-label">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+      </p>
+      <div
+        v-for="(variable, key) in processedParams"
+        :key="key"
+        class="template__variable-item"
+      >
+        <span class="variable-label">
+          {{ key }}
+        </span>
+        <woot-input
+          v-model="processedParams[key]"
+          type="text"
+          class="variable-input"
+          :styles="{ marginBottom: 0 }"
+        />
       </div>
+      <p v-if="$v.$dirty && $v.$invalid" class="error">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
     </div>
     <footer>
       <woot-button variant="smooth" @click="$emit('resetTemplate')">
@@ -43,12 +41,11 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
-
 const allKeysRequired = value => {
   const keys = Object.keys(value);
   return keys.every(key => value[key]);
 };
+import { requiredIf } from 'vuelidate/lib/validators';
 export default {
   props: {
     template: {
@@ -58,15 +55,13 @@ export default {
   },
   validations: {
     processedParams: {
-      required,
+      requiredIfKeysPresent: requiredIf('variables'),
       allKeysRequired,
     },
   },
   data() {
     return {
-      message: this.template.message,
       processedParams: {},
-      showRequiredMessage: false,
     };
   },
   computed: {
@@ -92,11 +87,8 @@ export default {
   methods: {
     sendMessage() {
       this.$v.$touch();
-      if (this.$v.$invalid) {
-        this.showRequiredMessage = true;
-        return;
-      }
-      const message = {
+      if (this.$v.$invalid) return;
+      const payload = {
         message: this.processedString,
         templateParams: {
           name: this.template.name,
@@ -106,18 +98,16 @@ export default {
           processed_params: this.processedParams,
         },
       };
-      this.$emit('sendMessage', message);
+      this.$emit('sendMessage', payload);
     },
     processVariable(str) {
       return str.replace(/{{|}}/g, '');
     },
     generateVariables() {
-      const templateString = this.template.components.find(
-        component => component.type === 'BODY'
-      ).text;
-      const variables = templateString.match(/{{([^}]+)}}/g).map(variable => {
-        return this.processVariable(variable);
-      });
+      const matchedVariables = this.templateString.match(/{{([^}]+)}}/g);
+      if (!matchedVariables) return;
+
+      const variables = matchedVariables.map(i => this.processVariable(i));
       this.processedParams = variables.reduce((acc, variable) => {
         acc[variable] = '';
         return acc;

diff --git a/app/javascript/shared/mixins/specs/whatsappTemplates/fixtures.js b/app/javascript/shared/mixins/specs/whatsappTemplates/fixtures.js
@@ -0,0 +1,268 @@
+export const templates = [
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'Esta é a sua confirmação de voo para {{1}}-{{2}} em {{3}}.',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text:
+          'Oi, {{1}}. Nós conseguimos resolver o problema que você estava enfrentando?',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Sim', type: 'QUICK_REPLY' },
+          { text: 'Não', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'es',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hola, {{1}}. ¿Pudiste solucionar el problema que tenías?',
+        type: 'BODY',
+      },
+      {
+        text: 'Este mensaje proviene de un negocio no verificado.',
+        type: 'FOOTER',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Sí', type: 'QUICK_REPLY' },
+          { text: 'No', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'id',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text:
+          'Halo {{1}}, apakah kami bisa mengatasi masalah yang sedang Anda hadapi?',
+        type: 'BODY',
+      },
+      {
+        text: 'Pesan ini berasal dari bisnis yang tidak terverifikasi.',
+        type: 'FOOTER',
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Ya', type: 'QUICK_REPLY' },
+          { text: 'Tidak', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Seu pacote foi enviado. Ele será entregue em {{1}} dias úteis.',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'id',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text:
+          'Paket Anda sudah dikirim. Paket akan sampai dalam {{1}} hari kerja.',
+        type: 'BODY',
+      },
+      {
+        text: 'Pesan ini berasal dari bisnis yang tidak terverifikasi.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'es',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'ó tu paquete. La entrega se realizará en {{1}} dí.',
+        type: 'BODY',
+      },
+      {
+        text: 'Este mensaje proviene de un negocio no verificado.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'id',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text:
+          'Ini merupakan konfirmasi penerbangan Anda untuk {{1}}-{{2}} di {{3}}.',
+        type: 'BODY',
+      },
+      {
+        text: 'Pesan ini berasal dari bisnis yang tidak terverifikasi.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_issue_resolution',
+    status: 'approved',
+    category: 'ISSUE_RESOLUTION',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text: 'Hi {{1}}, were we able to solve the issue that you were facing?',
+        type: 'BODY',
+      },
+      { text: 'This message is from an unverified business.', type: 'FOOTER' },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          { text: 'Yes', type: 'QUICK_REPLY' },
+          { text: 'No', type: 'QUICK_REPLY' },
+        ],
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'es',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'Confirmamos tu vuelo a {{1}}-{{2}} para el {{3}}.',
+        type: 'BODY',
+      },
+      {
+        text: 'Este mensaje proviene de un negocio no verificado.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_flight_confirmation',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      { type: 'HEADER', format: 'DOCUMENT' },
+      {
+        text: 'This is your flight confirmation for {{1}}-{{2}} on {{3}}.',
+        type: 'BODY',
+      },
+      { text: 'This message is from an unverified business.', type: 'FOOTER' },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'sample_shipping_confirmation',
+    status: 'approved',
+    category: 'SHIPPING_UPDATE',
+    language: 'en_US',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        text:
+          'Your package has been shipped. It will be delivered in {{1}} business days.',
+        type: 'BODY',
+      },
+      { text: 'This message is from an unverified business.', type: 'FOOTER' },
+    ],
+    rejected_reason: 'NONE',
+  },
+  {
+    name: 'no_variable_template',
+    status: 'approved',
+    category: 'TICKET_UPDATE',
+    language: 'pt_BR',
+    namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'DOCUMENT',
+      },
+      {
+        text: 'This is a test whatsapp template',
+        type: 'BODY',
+      },
+      {
+        text: 'Esta mensagem é de uma empresa não verificada.',
+        type: 'FOOTER',
+      },
+    ],
+    rejected_reason: 'NONE',
+  },
+];