refactor: share whatsapp/twilio template logic via @chatwoot/utils (#15001)

# Pull Request Template

## Description
Moves the WhatsApp & Twilio content-template logic to the shared
[`@chatwoot/utils`](https://github.com/chatwoot/utils)
([PR](https://github.com/chatwoot/utils/pull/62)) package so web and
mobile share one implementation. The neutral core takes the raw template
and returns `processed_params`, the same shape the web parsers already
use, so it's a drop-in with no behavior change.

- `templateHelper.js` / `URLHelper.js` → source `MEDIA_FORMATS`,
`findComponentByType`, `processVariable`, `buildTemplateParameters`,
`extractFilenameFromUrl` from the package
- `inboxes.js` → filters with shared `isSendableTemplate`
- `WhatsAppTemplateParser.vue` / `ContentTemplateParser.vue` →
`isFormInvalid` and Twilio media helpers now use the shared
`isWhatsAppComplete` / `isTwilioComplete` / `applyTwilioMediaFilename`

> Depends on the `@chatwoot/utils` release adding the shared template
API, bump `package.json` from `^0.0.55` to the published version before
merge.

Fixes
[CW-7540](https://linear.app/chatwoot/issue/CW-7540/web-templates-integration-with-utils)

## Type of change

- [x] Breaking change (Refactor)

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>

app/javascript/dashboard/components-next/content-templates/ContentTemplateParser.vue

@@ -3,8 +3,13 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
-import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
-import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+import {
+  isTwilioComplete,
+  isTwilioMediaTemplate,
+  getTwilioMediaVariableKey,
+  getTwilioMediaUrl,
+  applyTwilioMediaFilename,
+} from '@chatwoot/utils';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 
@@ -40,30 +45,23 @@ const templateBody = computed(() => {
   return props.template.body || '';
 });
 
-const hasMediaTemplate = computed(() => {
-  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
-});
+// Media-template detection and variable extraction are shared with the mobile
+// app via @chatwoot/utils.
+const hasMediaTemplate = computed(() => isTwilioMediaTemplate(props.template));
 
 const hasVariables = computed(() => {
   return templateBody.value?.match(VARIABLE_PATTERN) !== null;
 });
 
-const mediaVariableKey = computed(() => {
-  if (!hasMediaTemplate.value) return null;
-  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
-  if (!mediaUrl) return null;
-  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
-});
+const mediaVariableKey = computed(() =>
+  getTwilioMediaVariableKey(props.template)
+);
 
-const hasMediaVariable = computed(() => {
-  return hasMediaTemplate.value && mediaVariableKey.value !== null;
-});
+const hasMediaVariable = computed(() => mediaVariableKey.value !== null);
 
-const templateMediaUrl = computed(() => {
-  if (!hasMediaTemplate.value) return '';
-
-  return props.template?.types?.['twilio/media']?.media?.[0] || '';
-});
+const templateMediaUrl = computed(() =>
+  hasMediaTemplate.value ? getTwilioMediaUrl(props.template) : ''
+);
 
 const variablePattern = computed(() => {
   if (!hasVariables.value) return [];
@@ -83,26 +81,10 @@ const renderedTemplate = computed(() => {
   return rendered;
 });
 
-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaVariable.value) return false;
-
-  if (hasVariables.value) {
-    const hasEmptyVariable = variablePattern.value.some(
-      variable => !processedParams.value[variable]
-    );
-    if (hasEmptyVariable) return true;
-  }
-
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    !processedParams.value[mediaVariableKey.value]
-  ) {
-    return true;
-  }
-
-  return false;
-});
+// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(
+  () => !isTwilioComplete(props.template, processedParams.value)
+);
 
 const v$ = useVuelidate(
   {
@@ -135,19 +117,11 @@ const sendMessage = () => {
 
   const { friendly_name, language } = props.template;
 
-  // Process parameters and extract filename from media URL if needed
-  const processedParameters = { ...processedParams.value };
-
-  // For media templates, extract filename from full URL
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    processedParameters[mediaVariableKey.value]
-  ) {
-    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
-      processedParameters[mediaVariableKey.value]
-    );
-  }
+  // For media templates, reduce the media URL to a filename before sending.
+  const processedParameters = applyTwilioMediaFilename(
+    props.template,
+    processedParams.value
+  );
 
   const payload = {
     message: renderedTemplate.value,

app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue

@@ -13,6 +13,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
 
+import { isWhatsAppComplete } from '@chatwoot/utils';
 import Input from 'dashboard/components-next/input/Input.vue';
 import {
   buildTemplateParameters,
@@ -84,29 +85,10 @@ const renderedTemplate = computed(() => {
   return replaceTemplateVariables(bodyText.value, processedParams.value);
 });
 
-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaHeader.value) return false;
-
-  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
-    return true;
-  }
-
-  if (hasVariables.value && processedParams.value.body) {
-    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
-      value => !value
-    );
-    if (hasEmptyBodyVariable) return true;
-  }
-
-  if (processedParams.value.buttons) {
-    const hasEmptyButtonParameter = processedParams.value.buttons.some(
-      button => !button.parameter
-    );
-    if (hasEmptyButtonParameter) return true;
-  }
-
-  return false;
-});
+// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(
+  () => !isWhatsAppComplete(props.template, processedParams.value)
+);
 
 const v$ = useVuelidate(
   {