Show undefined variable warning before sending messaeg

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -127,6 +127,12 @@
       @on-send="onSendWhatsAppReply"
       @cancel="hideWhatsappTemplatesModal"
     />
+
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
+      :description="undefinedVariableMessage"
+    />
   </div>
 </template>
 
@@ -154,7 +160,10 @@ import {
 } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
-import { getMessageVariables } from 'dashboard/helper/messageHelper';
+import {
+  getMessageVariables,
+  getUndefinedVariablesInMessage,
+} from 'dashboard/helper/messageHelper';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
@@ -227,6 +236,7 @@ export default {
       doAutoSaveDraft: () => {},
       showWhatsAppTemplatesModal: false,
       updateEditorSelectionWith: '',
+      undefinedVariableMessage: '',
     };
   },
   computed: {
@@ -674,7 +684,7 @@ export default {
       };
       this.assignedAgent = selfAssign;
     },
-    async onSendReply() {
+    confirmOnSendReply() {
       if (this.isReplyButtonDisabled) {
         return;
       }
@@ -695,6 +705,25 @@ export default {
         this.$emit('update:popoutReplyBox', false);
       }
     },
+    async onSendReply() {
+      const undefinedVariables = getUndefinedVariablesInMessage({
+        message: this.message,
+        variables: this.messageVariables,
+      });
+      if (undefinedVariables.length > 0) {
+        const undefinedVariablesCount =
+          undefinedVariables.length > 1 ? undefinedVariables.length : 1;
+        this.undefinedVariableMessage = `You have ${undefinedVariablesCount} undefined variables in your message: ${undefinedVariables.join(
+          ', '
+        )}. Would you like to send the message anyway?`;
+        const ok = await this.$refs.confirmDialog.showConfirmation();
+        if (ok) {
+          this.confirmOnSendReply();
+        }
+      } else {
+        this.confirmOnSendReply();
+      }
+    },
     async sendMessage(messagePayload) {
       try {
         await this.$store.dispatch(

app/javascript/dashboard/helper/messageHelper.js

@@ -40,3 +40,19 @@ export const getMessageVariables = ({ conversation }) => {
     'agent.email': assignee?.email ? assignee?.email : '',
   };
 };
+
+export const getUndefinedVariablesInMessage = ({ message, variables }) => {
+  const regex = /{{(.*?)}}/g;
+  const matches = message.match(regex);
+  const undefinedVariables = [];
+  matches.forEach(match => {
+    const variable = match
+      .replace('{{', '')
+      .replace('}}', '')
+      .trim();
+    if (!variables[variable]) {
+      undefinedVariables.push(match);
+    }
+  });
+  return undefinedVariables;
+};

app/javascript/dashboard/helper/specs/messageHelper.spec.js

@@ -3,6 +3,7 @@ import {
   getFirstName,
   getLastName,
   getMessageVariables,
+  getUndefinedVariablesInMessage,
 } from '../messageHelper';
 
 const variables = {
@@ -111,3 +112,15 @@ describe('#getMessageVariables', () => {
     });
   });
 });
+
+describe('#getUndefinedVariablesInMessage', () => {
+  it('returns the undefined variables', () => {
+    const message = 'Please dm me at {{contact.twitter}}';
+    expect(
+      getUndefinedVariablesInMessage({ message, variables }).length
+    ).toEqual(1);
+    expect(getUndefinedVariablesInMessage({ message, variables })).toEqual(
+      expect.arrayContaining(['{{contact.twitter}}'])
+    );
+  });
+});

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -132,6 +132,13 @@
           "PLACEHOLDER": "Emails separated by commas",
           "ERROR": "Please enter valid email addresses"
         }
+      },
+      "UNDEFINED_VARIABLES": {
+        "TITLE": "Undefined variables",
+        "CONFIRM": {
+          "YES": "Send",
+          "CANCEL": "Cancel"
+        }
       }
     },
     "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team",