From 7790b887251eb653618ebaca864eecb8a0aa79d7 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 15 Nov 2024 14:30:46 +0530
Subject: [PATCH] chore: Fix whats app template

---
 .../ComposeNewConversation.vue                |  2 +-
 .../components/MessageEditor.vue              |  8 +-
 .../components/WhatsAppOptions.vue            | 18 ++--
 .../components/WhatsappTemplateParser.vue     | 84 ++++++++++++-------
 4 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue
index 2aa848a88..5ca07f3f6 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeNewConversation.vue
@@ -396,9 +396,9 @@ watch(
       />
 
       <MessageEditor
+        v-if="!isWhatsappInbox"
         v-model="state.message"
         :is-email-or-web-widget-inbox="isEmailOrWebWidgetInbox"
-        :is-whatsapp-inbox="isWhatsappInbox"
       />
     </div>
 
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
index d10a26dcc..f7de0726d 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
@@ -11,17 +11,13 @@ defineProps({
     type: Boolean,
     required: true,
   },
-  isWhatsappInbox: {
-    type: Boolean,
-    required: true,
-  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 </script>
 
 <template>
-  <div v-if="isEmailOrWebWidgetInbox" class="flex-1 h-full">
+  <div v-if="isEmailOrWebWidgetInbox" class="flex-1 h-full min-h-[200px]">
     <Editor
       :model-value="modelValue"
       placeholder="Write your message here..."
@@ -30,7 +26,7 @@ const emit = defineEmits(['update:modelValue']);
       @update:model-value="emit('update:modelValue', $event)"
     />
   </div>
-  <div v-else-if="!isWhatsappInbox" class="flex-1 h-full">
+  <div v-else class="flex-1 h-full min-h-[200px]">
     <TextArea
       :model-value="modelValue"
       placeholder="Write your message here..."
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
index 59af3723c..471b2af66 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -6,8 +6,8 @@ import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
 
 const props = defineProps({
   messageTemplates: {
-    type: Object,
-    default: () => {},
+    type: Array,
+    default: () => [],
   },
 });
 
@@ -22,10 +22,16 @@ const selectedTemplate = ref(null);
 const showTemplatesMenu = ref(false);
 
 const whatsAppTemplateMessages = computed(() => {
-  return props.messageTemplates
-    .filter(template => template.status.toLowerCase() === 'approved')
+  // Add null check and ensure it's an array
+  const templates = Array.isArray(props.messageTemplates)
+    ? props.messageTemplates
+    : [];
+
+  // TODO: Remove the last filter when we support all formats
+  return templates
+    .filter(template => template?.status?.toLowerCase() === 'approved')
     .filter(template => {
-      return template.components.every(component => {
+      return template?.components?.every(component => {
         return !formatsToRemove.includes(component.format);
       });
     });
@@ -75,7 +81,7 @@ const handleSendMessage = template => {
     />
     <div
       v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
         <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
index 5b3cee85a..ee32e57ff 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -17,21 +17,16 @@ const emit = defineEmits(['sendMessage', 'back']);
 
 const processedParams = ref({});
 
+const templateName = computed(() => {
+  return props.template?.name || '';
+});
+
 const templateString = computed(() => {
   return props.template?.components?.find(
     component => component.type === 'BODY'
   ).text;
 });
 
-const allKeysRequired = value => {
-  const keys = Object.keys(value);
-  return keys.every(key => value[key]);
-};
-
-const variables = computed(() => {
-  return templateString.value.match(/{{([^}]+)}}/g);
-});
-
 const processVariable = str => {
   return str.replace(/{{|}}/g, '');
 };
@@ -43,15 +38,35 @@ const processedString = computed(() => {
   });
 });
 
-const v$ = useVuelidate(
-  {
-    processedParams: {
-      requiredIfKeysPresent: requiredIf(variables),
-      allKeysRequired,
-    },
-  },
-  { processedParams }
-);
+const processedStringWithVariableHighlight = computed(() => {
+  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
+
+  return variables.reduce((result, variable) => {
+    const variableKey = processVariable(variable);
+    const value = processedParams.value[variableKey] || variable;
+    return result.replace(
+      variable,
+      `<span class="break-all text-n-slate-12">${value}</span>`
+    );
+  }, templateString.value);
+});
+
+const rules = computed(() => {
+  const paramRules = {};
+  Object.keys(processedParams.value).forEach(key => {
+    paramRules[key] = { required: requiredIf(true) };
+  });
+  return {
+    processedParams: paramRules,
+  };
+});
+
+const v$ = useVuelidate(rules, { processedParams });
+
+const getFieldErrorType = key => {
+  if (!v$.value.processedParams[key]?.$error) return 'info';
+  return 'error';
+};
 
 const generateVariables = () => {
   const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
@@ -64,9 +79,9 @@ const generateVariables = () => {
   }, {});
 };
 
-const sendMessage = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
+const sendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
 
   const payload = {
     message: processedString.value,
@@ -88,15 +103,18 @@ onMounted(() => {
 
 <template>
   <div
-    class="absolute top-full mt-1.5 left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
   >
     <span class="text-sm text-n-slate-12">
-      {{ `WhatsApp template: ${template.name}` }}
+      {{ `WhatsApp template: ${templateName}` }}
     </span>
-    <p class="mb-0 text-sm text-n-slate-11">{{ processedString }}</p>
+    <p
+      class="mb-0 text-sm text-n-slate-11"
+      v-html="processedStringWithVariableHighlight"
+    />
 
     <span
-      v-if="processedParams.length"
+      v-if="Object.keys(processedParams).length"
       class="text-sm font-medium text-n-slate-12"
     >
       {{ 'Variables' }}
@@ -105,16 +123,26 @@ onMounted(() => {
     <div
       v-for="(variable, key) in processedParams"
       :key="key"
-      class="flex flex-col w-full gap-4"
+      class="flex items-center w-full gap-2"
     >
-      <span class="w-8 h-8 text-sm text-left text-n-slate-12">{{ key }}</span>
-      <Input v-model="processedParams[key]" custom-input-class="!h-8" />
+      <span
+        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
+      >
+        {{ key }}
+      </span>
+      <Input
+        v-model="processedParams[key]"
+        custom-input-class="!h-8 w-full !bg-transparent"
+        class="w-full"
+        :message-type="getFieldErrorType(key)"
+      />
     </div>
 
     <div class="flex items-end justify-between w-full gap-3 h-14">
       <Button
         label="Go back"
         color="slate"
+        variant="faded"
         class="w-full font-medium"
         @click="emit('back')"
       />